UWP Bild Überlauf innerhalb der Taste

Question

Ich versuche, ein Bild innerhalb einer Schaltfläche zu strecken, die in einem Stackpanel und einem Raster ist, aber es funktioniert nicht. Auf der mobilen Größe funktioniert es sehr gut, aber wenn die App für einen Desktop ist, funktioniert es nicht mehr, wir können sehen, dass das Bild überläuft.

Und, wie es auf dem Desktop sieht

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

Jemand kann mir sagen, was falsch ist und wie ich das Bild strecken kann im Inneren die Taste ? Übrigens ist es eine PNG-Datei.

Danke an alle !!

Answer 1

Stack-Panel mit vertikaler Ausrichtung gibt den Children in Bezug auf ihre Höhe keine Grenzen. Es stellt nur sicher, dass sie übereinander gestapelt sind. Dies bedeutet, dass die Schaltfläche auf dem Desktop eine große Breite erhält und das Bild daher vertikal wächst. Eine Möglichkeit, dies zu verhindern, besteht darin, MaxHeight des Buttons oder des Bildes darin zu setzen.

Eine bessere Lösung wäre, ein Raster zu verwenden:

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

Die zweite Reihe der Gitter hat „*“ Höhe, was bedeutet, dass es verfügbaren Raum zu füllen, werden wachsen. Dies begrenzt die Höhe der Schaltfläche. Der Standardwert Stretch Wert des Bildes ist Uniform, die sicherstellen, dass das Bild in der Schaltfläche gut aussieht.

Answer 2

@Romasz und @MZetko haben Recht. Aber für das Layout unterschiedliche Ausrichtung auf Geräteplattformen, mein Vorschlag ist, dass Sie auch VisualStateManager verwenden können, zum Beispiel die Width und Height Eigenschaften für verschiedene App Fenstergröße einstellen wie folgt aus:

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