如何将自定义UserControl的宽度与模板化GridViewColumn的宽度绑定？

我来帮你搞定这个问题，你遇到的核心问题是布局约束没有正确传递，导致SegmentedProgressBar里的StackPanel没法跟着ListView列宽一起调整。咱们一步步来修正：

问题根源分析 #

1. 你绑定GridViewColumn.Width到UserControl的Width是个误区——这个属性是列的整体宽度（包含列头和额外布局空间），并不是单元格内控件的实际可用宽度，调整列宽时这个绑定没法精准同步。
2. 你的UserControl默认HorizontalContentAlignment不是Stretch，哪怕UserControl本身设了HorizontalAlignment="Stretch"，内部的StackPanel也没法占满UserControl的宽度。
3. StackPanel本身没有明确的宽度约束，没法自动响应父容器的尺寸变化。

解决方案 #

第一步：修改SegmentedProgressBar的XAML #

确保UserControl的内容能完全拉伸，同时让内部StackPanel占满整个控件宽度：

<UserControl x:Class="WpfApplication1.SegmentedProgressBar"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
             mc:Ignorable="d" 
             d:DesignHeight="20" d:DesignWidth="300"
             HorizontalAlignment="Stretch"
             HorizontalContentAlignment="Stretch" <!-- 关键：让内容占满控件宽度 -->
             x:Name="ucsg">
    <!-- 用Grid做根容器，确保内部StackPanel能自动拉伸 -->
    <Grid>
        <StackPanel x:Name="spanel" 
                    Orientation="Horizontal" 
                    Background="Blue" 
                    HorizontalAlignment="Stretch">
        </StackPanel>
    </Grid>
</UserControl>

第二步：修正MainWindow里的CellTemplate #

去掉错误的Width绑定，改用HorizontalAlignment="Stretch"让UserControl自动填充单元格的可用空间：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:local="clr-namespace:WpfApplication1"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <StackPanel>
            <ListView Name="listview1">
                <ListView.View>
                    <GridView>
                        <GridViewColumn x:Name="SPBarCell" Width="100" Header="Segmented" >
                            <GridViewColumn.CellTemplate>
                                <DataTemplate>
                                    <local:SegmentedProgressBar x:Name="test" 
                                                                Height="20" 
                                                                Margin="0"
                                                                HorizontalAlignment="Stretch"/>
                                    <!-- 移除Width绑定，靠布局系统自动分配空间 -->
                                </DataTemplate>
                            </GridViewColumn.CellTemplate>
                        </GridViewColumn>
                    </GridView>
                </ListView.View>
            </ListView>
        </StackPanel>
    </Grid>
</Window>

额外优化（可选） #

如果StackPanel还是没法同步宽度，可以直接绑定它的Width到UserControl的实际宽度：

<StackPanel x:Name="spanel" 
            Orientation="Horizontal" 
            Background="Blue" 
            Width="{Binding ElementName=ucsg, Path=ActualWidth}">
</StackPanel>

这样调整后，当你拖动ListView列宽时，SegmentedProgressBar会自动填充单元格宽度，内部的StackPanel也会跟着一起拉伸了。

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