Circular
Hola Buenas tardes, tengo el siguiente problema, Cuando arrastro mi navegador entre mis 3 monitores que tienen diferentes resoluciones, el componente no se adapta a la nueva resolución cuando le doy maximizar al navegador, de maneral manual tengo que dar clic en una pestaña en la page de blazor y volver dar clic en donde esta el componente para que se adapte dejo codigo y imagenes ilustrativas.
ESTE CODIGO PERTENECE AL COMPONENTE CIRUCLAR GAUGE
<SfCircularGauge Width="100%" Height="100%" AllowMargin="false" Background="#000000" >
<CircularGaugeBorder Color="#FF0000" Width="0">
</CircularGaugeBorder>
<CircularGaugeAxes>
<CircularGaugeAxis StartAngle="220" EndAngle="90" Minimum="0" Maximum="@MaxEngineValue" Radius="100%" ShowLastLabel="false">
<CircularGaugeRanges>
<CircularGaugeRange Start="0" End="@MaxEngineValue" Radius="100%" Color="#bfbfbf" StartWidth="15" EndWidth="15" Position="PointerRangePosition.Inside">
</CircularGaugeRange>
<CircularGaugeRange Start="0" End="@EngineValue" Radius="100%" Color="#17b75f" StartWidth="15" EndWidth="15" Position="PointerRangePosition.Inside">
</CircularGaugeRange>
</CircularGaugeRanges>
<CircularGaugeAxisMajorTicks Color="red" Height="0" Width="0" Position="Position.Inside" Offset="0" Interval="@MaxEngineValue"> </CircularGaugeAxisMajorTicks>
<CircularGaugeAxisMinorTicks Color="green" Height="0" Width="0" Position="Position.Inside" Offset="5" Interval="0"> </CircularGaugeAxisMinorTicks>
<CircularGaugeAxisLineStyle Color="#bfbfbf" Width="0"> </CircularGaugeAxisLineStyle>
<CircularGaugeAxisLabelStyle Position="Position.Inside" Offset="5" AutoAngle="false">
<CircularGaugeAxisLabelFont Color="#FFFFFF" Size="15px"> </CircularGaugeAxisLabelFont>
</CircularGaugeAxisLabelStyle>
<CircularGaugePointers>
<CircularGaugePointer Type="PointerType.Marker" MarkerShape="GaugeShape.Triangle" MarkerWidth="20" MarkerHeight="20" Position="PointerRangePosition.Inside" Value="@EngineValue" Radius="85%" Color="#17b75f">
<CircularGaugePointerAnimation Enable="false" />
</CircularGaugePointer>
</CircularGaugePointers>
<CircularGaugeAnnotations>
<CircularGaugeAnnotation Angle="0" Radius='15' ZIndex='1' Content="">
<ContentTemplate>
<div class="TextAnnotation">@EngineValue.ToString("0")</div>
</ContentTemplate>
</CircularGaugeAnnotation>
<CircularGaugeAnnotation Angle="0" Radius='-30' ZIndex='1' Content="">
<ContentTemplate>
<div class="TextAnnotationUnidades">@Units</div>
</ContentTemplate>
</CircularGaugeAnnotation>
<CircularGaugeAnnotation Angle="-40" Radius='-108' ZIndex='1' Content="">
<ContentTemplate>
<div class="TextAnnotationTitle">@Title</div>
</ContentTemplate>
</CircularGaugeAnnotation>
</CircularGaugeAnnotations>
</CircularGaugeAxis>
</CircularGaugeAxes>
</SfCircularGauge>
@code {
[Parameter]
public Double EngineValue { get; set; }
[Parameter]
public Double MaxEngineValue { get; set; }
[Parameter]
public String? Units { get; set; }
[Parameter]
public String? Title { get; set; }
}
<style>
.TextAnnotation{
color:#FFFFFF ;
font-family: inherit;
font-size: 200%;
}
.TextAnnotationTitle {
color: #00B0F0;
font-family: inherit;
font-size: 150%;
}
</style>
<style type="text/css" media="screen and (min-width: 3440px) and (max-width: 3440px) ">
Contenedor{
}
.TextAnnotation {
font-size: 300%;
}
.TextAnnotationUnidades {
font-size: 250%;
color: #ffffff;
}
.TextAnnotationTitle {
font-size: 250%;
}
</style>
<style type="text/css" media="screen and (min-width: 1920px) and (max-width: 1920px) ">
.TextAnnotation {
font-size: 250%;
color:#ffffff;
}
.TextAnnotationUnidades {
font-size: 150%;
color:#ffffff;
}
.TextAnnotationTitle {
font-size: 150%;
}
</style>
<style type="text/css" media="screen and (min-width: 1536px) and (max-width: 1536px) ">
.TextAnnotation {
font-size: 200%;
color: #ffffff;
}
.TextAnnotationUnidades {
font-size: 150%;
color: #ffffff;
}
.TextAnnotationTitle {
font-size: 150%;
}
</style>
CODIGO DE LA PESTAÑA DONDE MANDO A LLAMAR AL COMPONENTE
<div class="ContenedorMotor">
@for (int i = 1; i < @NumberOfMachines + 1; i++)
{
<div class="TextoTitulos">Engines @i </div>
}
@for (int i = 1; i < @NumberOfMachines + 1; i++)
{
<div> <Engine EngineValue="@_realTimeSensors.RealTimeSensorData.Engines[i].RPM" MaxEngineValue=1200 Units="RPM" Title="Rotación"></Engine></div>
}
@for (int i = 1; i < @NumberOfMachines + 1; i++)
{
<div> <Engine EngineValue="@_realTimeSensors.RealTimeSensorData.Engines[i].SourceFlow" MaxEngineValue=148 Units="GPH" Title="Consumo"></Engine></div>
}
@for (int i = 1; i < @NumberOfMachines + 1; i++)
{
<div> <Engine EngineValue="@_realTimeSensors.RealTimeSensorData.Engines[i].ReturnTemp" MaxEngineValue=100 Units="°C" Title="Temperatura"></Engine></div>
}
</div>
@code {
protected override void OnInitialized()
{
_realTimeSensors.OnChangeAsync += Refresh;
}
private async Task Refresh()
{
await InvokeAsync(StateHasChanged);
}
public void Dispose()
{
_realTimeSensors.OnChangeAsync -= Refresh;
}
public static int NumberOfMachines = 6;
}
<style>
* {
margin: 0;
padding: 0;
}
.ContenedorMotor {
text-align: center;
color: #00B0F0;
width: 100%;
height: 96vh;
display: grid;
grid-template-columns: repeat(@NumberOfMachines, 1fr);
grid-template-rows: 35px repeat(3,1fr);
}
.TextoTitulos {
font-size: 150%;
color: #00B0F0;
}
yle>
CUANDO CORRO EL PROYECTO Y ABRE POR PRIMERA VEZ TODO SALE BIEN RESOLUCION (1920 * 1080)
CUANDO ARRASTRO EL NAVEGADOR A LA SEGUNDA PANTALLA PASA ESTO (RESOLUCION 3440 * 1440)
1.-EL NAVEGADOR SE HACE PEQUEÑO
2.-DOY CLIC EN MAXIMIZAR Y APARECE ASI
3.-PERO CUANDO DOY CLIC EN OTRA PESTAÑA Y REGRESO A LA PESTAÑA DONDE ESTABA EL COMPONENTE SE VE ASI
4.-YO QUIERO QUE CUANDO DOY CLIC EN EL BOTON MAXIMIZAR DEL NAVEGADOR TENGA LA ADAPTABILIDAD DE ADAPTARCE A LA NUEVA RESOLUCION SIN TENER QUE DAR CLIC EN OTRA PESTAÑA PARA REGRESAR A DONDE ESTA EL COMPONENTE Y SE ADAPTE
5.- ADEMAS LAS ANOTACIONES ENTRE LAS RESOLUCIONES CAMBIAN DE LUGAR EN 1920 * 1080 SE VE BIEN PERO EN 3440 * 1440 SE VE MAS PEGADAS
