WPF图像拉伸，以填补不延伸到它的父母

Question

的界限这是我的XAML，它的样子：

<Window x:Class="GameLenseWpf.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="450" Width="350" MinHeight="450" MinWidth="350"> 

    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="0.15*" /> 
      <RowDefinition /> 
     </Grid.RowDefinitions> 
     <Image Grid.Row="0" Stretch="Fill" Source="Image/topBarBg.png" /> 
     <StackPanel Orientation="Horizontal" Grid.Row="0"> 
      <TextBlock Text="Platform" 
         Foreground="White" 
         FontFamily="Georgia" 
         FontSize="15" 
         Margin="10" 
         HorizontalAlignment="Center" 
         VerticalAlignment="Center"/> 
      <ComboBox x:Name="cmbPlatform" 
         Margin="10" 
         FontFamily="Georgia" 
         FontSize="15" 
         MinHeight="30" 
         MinWidth="140" 
         VerticalAlignment="Center" 
         VerticalContentAlignment="Center" SelectionChanged="cmbPlatform_SelectionChanged"> 
       <ComboBoxItem>All Platforms</ComboBoxItem> 
       <ComboBoxItem>Playstation 3</ComboBoxItem> 
       <ComboBoxItem>XBox 360</ComboBoxItem> 
       <ComboBoxItem>Wii</ComboBoxItem> 
       <ComboBoxItem>PSP</ComboBoxItem> 
       <ComboBoxItem>DS</ComboBoxItem> 
      </ComboBox> 
     </StackPanel> 
     <Image x:Name="imgAbout" Grid.Row="0" Source="Image/about.png" 
       Height="16" HorizontalAlignment="Right" 
       VerticalAlignment="Center" 
       Margin="0 0 10 0" /> 
     <ListBox Grid.Row="1" x:Name="lstGames" Background="#343434" Padding="5" 
       ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
       HorizontalContentAlignment="Stretch"> 
      <ListBox.Resources> 
       <Style TargetType="ListBoxItem"> 
        <Style.Resources> 
         <!-- SelectedItem with focus --> 
         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" 
         Color="Transparent" /> 
         <!-- SelectedItem without focus --> 
         <SolidColorBrush x:Key="{x:Static SystemColors.ControlBrushKey}" 
         Color="Transparent" /> 
         <!-- SelectedItem text foreground --> 
         <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" 
         Color="Black" /> 
        </Style.Resources> 
        <Setter Property="FocusVisualStyle" Value="{x:Null}" /> 
       </Style> 
      </ListBox.Resources> 
      <ListBox.ItemTemplate> 
       <DataTemplate> 
        <Grid Height="120" Margin="0 10" > 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="90"/> 
          <ColumnDefinition /> 
         </Grid.ColumnDefinitions> 
         <Grid.RowDefinitions> 
          <RowDefinition />        
         </Grid.RowDefinitions> 

         <Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0"> 
          <Canvas Grid.Row="0" Grid.Column="0" > 
           <Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Stretch="UniformToFill"/> 
           <Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" /> 
          </Canvas>       
         </Border> 

         <StackPanel Grid.Row="0" Grid.Column="1" Margin="12 0 0 0"> 
          <StackPanel Orientation="Horizontal"> 
           <TextBlock Text="Title:" FontFamily="Arial" Foreground="White"/> 
           <TextBlock Text="{Binding Title}" FontFamily="Arial" Foreground="White" /> 
          </StackPanel> 
          <StackPanel Orientation="Horizontal"> 
           <TextBlock Text="Release Date:" FontFamily="Arial" Foreground="White" /> 
           <TextBlock Text="{Binding ReleaseDate}" FontFamily="Arial" Foreground="White" /> 
          </StackPanel> 
          <TextBlock Text="Synopsis" FontFamily="Arial" Foreground="White" /> 
          <TextBox Background="#454545" Foreground="White" TextWrapping="Wrap" Text="{Binding Synopsis}" MaxHeight="73" /> 
         </StackPanel> 
        </Grid> 
       </DataTemplate> 
      </ListBox.ItemTemplate> 
     </ListBox> 
    </Grid> 
</Window> 

我只想比赛图像拉伸以填充画布边界，这是在圆形边界内。

为什么不这样做？

Answer 1

的问题是，你有一个画面内的图像。基本上，任何时候你把一个元素放在Canvas面板中，你都忽略了整个布局系统。画布中的元素根本不参与布局。你想要做的是一个普通的Grid元素取代Canvas元素（你不需要定义行或列，则默认为一个单一的行/列）。

编辑

而且实际上更仔细地看待你正在尝试做的事情，你需要做一些小小的调整。尝试这个。

<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4"> 
    <Grid> 
     <Image Source="{Binding ImageUrl}" Stretch="UniformToFill"/> 
     <Image Source="Image/youtube.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Height="20" Width="20" /> 
    </Grid>       
</Border> 

Answer 2

你的问题是在这里

<Border BorderBrush="#202020" BorderThickness="5" CornerRadius="4" Panel.ZIndex="0"> 
    <Canvas Grid.Row="0" Grid.Column="0" > 
     <Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/> 
     <Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" /> 
    </Canvas>       
</Border> 

你有BorderThickness属性这使黑色边框的图像四周，只是将其删除或将其设置为0，这将解决这个问题。

所以你的代码会

<Border BorderBrush="#202020" CornerRadius="4" Panel.ZIndex="0"> 
    <Canvas Grid.Row="0" Grid.Column="0" > 
     <Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/> 
     <Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" /> 
    </Canvas>       
</Border> 

或

<Border BorderBrush="#202020" BorderThickness="0" CornerRadius="4" Panel.ZIndex="0"> 
    <Canvas Grid.Row="0" Grid.Column="0" > 
     <Image Source="{Binding ImageUrl}" Canvas.Left="0" Canvas.Top="0" Width="80" Stretch="Fill"/> 
     <Image Source="Image/youtube.png" Canvas.Bottom="0" Canvas.Right="0" Height="20" Width="20" /> 
    </Canvas>       
</Border>