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>

我只想让游戏图像拉伸以填满圆形边框内的画布边界。

为什么它没有做到这一点？

- Only Bolivian Here

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>

- Josh

---

谢谢，我不知道Canvas可以这样做！ :) 非常感谢，这个解决方案很好。 - Only Bolivian Here

还要注意，我删除了一些没有作用的属性。特别是Panel.ZIndex不是必需的（但我怀疑它是在尝试调试时添加的），而在Canvas上设置的Grid.Row/Grid.Column没有效果，因为Canvas不直接位于Grid内。很高兴能帮到你。 - Josh

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>

- sikas

---

这与我的问题无关。我没有边框的问题。我希望图像被包含在边框内，但它没有。它似乎忽略了画布的大小。 - Only Bolivian Here

Grid.Row=0 应该在 Border 元素中。 - Daniel Teleginski Camargo