Question

我试图在一个位于堆叠面板和网格内的按钮内拉伸图像，但它不起作用。在移动尺寸上，它的效果非常好，但当应用程序用于桌面时，它不再有效，我们可以看到图像溢出。

它在桌面上的样子

我的代码：

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

有人可以告诉我出了什么问题以及如何在按钮内拉伸图像？顺便说一句，它是一个.png文件。

谢谢大家!!

Answer 1

垂直方向的堆叠面板不会对儿童的身高施加任何限制。它只是确保它们一个堆叠在另一个之上。这意味着，在桌面上，按钮的宽度变大，因此图像垂直增长。防止这种情况的一种方法是在其中设置按钮或图像的MaxHeight。

更好的解决方案是使用网格：

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

网格的第二行具有“*”高度，这意味着它将增长以填充可用空间。这将限制按钮的高度。图像的默认Stretch值为Uniform，这将确保图像在按钮内看起来很好。

Answer 2

@Romasz和@MZetko是对的。但对于针对不同设备平台的布局，我的建议是您还可以使用VisualStateManager为不同的应用窗口大小设置Width和Height属性，例如：

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

UWP图像溢出按钮内部

2 个答案: