UWP按钮内的图像溢出

我试图拉伸一个图像里面的一个按钮，这是一个堆栈面板和网格内，但它不起作用。在手机大小上，它工作得很好，但是当应用程序用于桌面时，它不再工作，我们可以看到图像溢出。UWP按钮内的图像溢出

而且它是什么样子的桌面

我的代码：

<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文件。

谢谢大家！

来源

2016-08-01 Thomas Montagnoni

尝试设置你的'Image'拉伸= UniformToFill –

仍然一样... –

你有没有想过使用额外的行而不是stackpanel？ Stackpanel的高度不确定，因此可能是个问题。 – Romasz

具有垂直方向的堆叠面板对高度方面的儿童没有任何限制。它只是确保它们堆叠在另一个之上。这意味着，在桌面上，Button会获得很大的宽度，因此图像会垂直增长。防止这种情况的一种方法是在按钮或图像内部设置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，这将确保图像在按钮内部看起来不错。

来源

2016-08-02 06:47:49

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

来源

2016-08-02 07:15:18

UWP按钮内的图像溢出

回答

相关问题