c# - studio - uwp vs wpf

UWP Desbordamiento de imagen dentro del botón

Question

Estoy tratando de estirar una imagen dentro de un botón que está dentro de un panel de distribución y una cuadrícula, pero no funciona. En el tamaño móvil funciona muy bien, pero cuando la aplicación es para un escritorio ya no funciona, podemos ver que la imagen se desborda.

Y lo que parece en el escritorio

Mi código:

<StackPanel x:Name="g5" Grid.Column="1" Grid.Row="1"  Padding="20" Orientation="Vertical" >
        <TextBlock Text="Site" FontSize="20"/>
        <Button x:Name="websiteButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0" Background="#fc0">
            <Image x:Name="websiteImage" Source="Assets/website.png" NineGrid="0" Margin="20,20,20,20"/>
        </Button>
    </StackPanel>

¿Alguien puede decirme qué está mal y cómo puedo estirar la imagen dentro del botón? Por cierto, es un archivo .png.

Gracias a todos !!

Answer 1

El panel de pila con orientación vertical no impone ningún límite a los niños en términos de altura. Simplemente asegura que estén apilados uno encima del otro. Esto significa que en el escritorio, el botón tiene un ancho grande y, por lo tanto, la imagen crece verticalmente a. Una forma de evitar esto es establecer MaxHeight del botón o de la imagen dentro de él.

Una mejor solución sería usar una Grid:

    <Grid x:Name="g5" Height="200" HorizontalAlignment="Stretch" Padding="20">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <TextBlock Text="Site" FontSize="20"/>
        <Button Grid.Row="1" x:Name="websiteButton" HorizontalAlignment="Stretch" Margin="0" Background="#fc0">
            <Image x:Name="websiteImage" Source="/Assets/Square150x150Logo.png" NineGrid="0" Margin="20,20,20,20"/>
        </Button>
    </Grid>

La segunda fila de la Grilla tiene una altura "*", lo que significa que crecerá para llenar el espacio disponible. Esto limitará la altura del botón. El valor Stretch predeterminado de la imagen es Uniform , lo que asegura que la imagen se verá bien dentro del botón.

Answer 2

@Romasz y @MZetko tienen razón. Pero para el diseño dirigido a diferentes plataformas de dispositivos, mi sugerencia es que también se puede usar VisualStateManager para establecer las propiedades de Width y Height para el tamaño de la ventana de la aplicación diferente, por ejemplo, así:

<VisualStateManager.VisualStateGroups>
    <VisualStateGroup>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="720" />
                <!--for desktop-->
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="websiteButton.Width" Value="300" />
                <Setter Target="websiteButton.Height" Value="300" />
            </VisualState.Setters>
        </VisualState>
        <VisualState>
            <VisualState.StateTriggers>
                <AdaptiveTrigger MinWindowWidth="0" />
                <!--for mobile-->
            </VisualState.StateTriggers>
            <VisualState.Setters>
                <Setter Target="websiteButton.Width" Value="150" />
                <Setter Target="websiteButton.Height" Value="150" />
            </VisualState.Setters>
        </VisualState>
    </VisualStateGroup>
</VisualStateManager.VisualStateGroups>