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按鈕內的圖像溢出

回答

相關問題