UWP Image overflow inside button

问题

I'm trying to stretch an image inside a Button which is inside a stackpanel and a grid but it doesn't works. On mobile size it works very well but when the app is for an Desktop it doesn't work anymore, we can see that the image overflows.

And what it looks like on desktop

My code:

<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>

Someone can tell me what is wrong and how i can stretch the image inside the button ? Btw it's a .png file.

Thanks everyone !!

回答1:

Stack Panel with Vertical orientation does not impose any limits on the Children in terms of their height. It just ensures that they are stacked one on top of another. This means, that on Desktop the Button gets large width and therefore the image grows vertically to. One way to prevent this is to set MaxHeight of the Button or of the Image inside of it.

A better solution would be to use a 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>

The second row of the Grid has "*" height, which means that it will grow to fill available space. This will limit the height of the button. The default Stretch value of the image is Uniform, which will ensure the image will look good inside the button.

回答2:

@Romasz and @MZetko are right. But for layout targeting different device platform, my suggestion is that you can also use VisualStateManager to set the Width and Height properties for different app window's size for example like this:

<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>

来源：https://stackoverflow.com/questions/38708646/uwp-image-overflow-inside-button

标签

windows

mobile

uwp