WPF：如何让ViewBox填满ItemsControl？图片绑定显示异常问题

核心问题出在三个地方：ViewBox的缩放依赖子元素的原始尺寸、Border背景图的拉伸模式未适配、ItemsControl的Item容器未填充父面板空间。下面是具体解决方法：

方案1：给Border设置基准尺寸+配置ViewBox与容器 #

ViewBox需要子元素有明确的宽高才能正确缩放，同时要让ItemsControl的每个Item容器填满面板空间：

<ItemsControl ItemsSource="{Binding YourItems}">
    <!-- 确保ItemsPanel占满可用空间 -->
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ItemsControl}}"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <!-- ViewBox填充父容器，按比例缩放内部Border -->
            <ViewBox Stretch="Uniform" Width="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=ContentPresenter}}">
                <!-- 给Border设置基准宽高，作为ViewBox的缩放参照 -->
                <Border Width="200" Height="150" CornerRadius="8">
                    <Border.Background>
                        <!-- 设置ImageBrush的拉伸模式，避免图片空白 -->
                        <ImageBrush ImageSource="{Binding ImagePath}" Stretch="UniformToFill"/>
                    </Border.Background>
                </Border>
            </ViewBox>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
    
    <!-- 让每个Item的容器填充面板可用空间 -->
    <ItemsControl.ItemContainerStyle>
        <Style TargetType="ContentPresenter">
            <Setter Property="HorizontalAlignment" Value="Stretch"/>
            <Setter Property="VerticalAlignment" Value="Stretch"/>
            <Setter Property="Margin" Value="8"/>
        </Style>
    </ItemsControl.ItemContainerStyle>
</ItemsControl>

方案2：用Grid替代ViewBox（更灵活的空间适配） #

如果不需要严格等比缩放，直接用Grid包裹Border，让Border自动填充Grid空间：

<ItemsControl ItemsSource="{Binding YourItems}">
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- 示例用UniformGrid自动均分空间，可替换为其他面板 -->
            <UniformGrid Columns="3"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
    
    <ItemsControl.ItemTemplate>
        <DataTemplate>
            <Grid Margin="8">
                <Border CornerRadius="8">
                    <Border.Background>
                        <ImageBrush ImageSource="{Binding ImagePath}" Stretch="UniformToFill"/>
                    </Border.Background>
                </Border>
            </Grid>
        </DataTemplate>
    </ItemsControl.ItemTemplate>
</ItemsControl>

关键注意事项 #

• 必须给ImageBrush设置Stretch属性（推荐UniformToFill），避免图片因缩放比例问题显示空白；
• ItemsControl的ItemContainerStyle一定要配置HorizontalAlignment="Stretch"和VerticalAlignment="Stretch"，否则内部控件只会占用内容最小空间；
• 使用ViewBox时，子元素（Border）必须有明确的宽高基准，不然ViewBox会将其压缩到0尺寸。

内容的提问来源于stack exchange，提问作者ShuFengYingt