使用相同宽度大小的元素填充 ItemsControl 中的所有可用空间答案

【问题标题】：Fill all available space in ItemsComtrol with same width size of elements使用相同宽度大小的元素填充 ItemsControl 中的所有可用空间
【发布时间】：2017-10-19 13:50:42
【问题描述】：

我有一个 ItemsControl，ItemsPanel 是由 DockPanel 制作的。

在 DockPanel 内部，我可以有一个、两个或三个按钮。问题出在按钮的宽度上：我希望三个元素具有相同的大小，但元素采用它们需要的大小（最后一个元素采用多余的宽度，因为 LastChildFill 为真）。

我可以在不手动提供大小的情况下为按钮提供相同的宽度吗？

    <ItemsControl ItemTemplate="{StaticResource Template1}" ItemsSource="{Binding Path=options, Mode=OneWay}" ItemsPanel="{StaticResource Panel1}" HorizontalContentAlignment="Stretch"/>

    <ItemsPanelTemplate x:Key="Panel1">
        <DockPanel Height="Auto" Width="Auto" LastChildFill="True"/>
    </ItemsPanelTemplate>

    <DataTemplate x:Key="BasicasTemplateOpciones"  DataType="{x:Type local:MyOption}">
        <Grid HorizontalAlignment="Stretch">
            <Button DataContext="{Binding}" HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch" >
                <Button.Template>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid HorizontalAlignment="Stretch" VerticalAlignment="Center">
                                <StackPanel Orientation="Horizontal">
                                    <TextBlock HorizontalAlignment="Center" VerticalAlignment="Stretch"/>
                                    <TextBlock HorizontalAlignment="Right" VerticalAlignment="Stretch"/>
                                </StackPanel>
                            </Grid>
                    </ControlTemplate>
                </Button.Template>
            </Button>
        </Grid>
    </DataTemplate>

【问题讨论】：

标签： wpf xaml

【解决方案1】：

只有一行的UniformGrid 可以满足您的需求：

<ItemsPanelTemplate x:Key="Panel1">
    <UniformGrid Rows="1" />
</ItemsPanelTemplate>

例子：

<StackPanel Orientation="Vertical">
    <StackPanel.Resources>
        <ItemsPanelTemplate x:Key="Panel1">
            <UniformGrid Rows="1" />
        </ItemsPanelTemplate>
        <Style TargetType="ItemsControl" x:Key="ICStyle">
            <Style.Resources>
                <Style TargetType="Button">
                    <Setter Property="Margin" Value="2" />
                </Style>
            </Style.Resources>
            <Setter Property="ItemsPanel" Value="{StaticResource Panel1}" />
        </Style>
    </StackPanel.Resources>

    <ItemsControl Style="{StaticResource ICStyle}">
        <Button>Foo</Button>
    </ItemsControl>

    <ItemsControl Style="{StaticResource ICStyle}">
        <Button>Foo</Button>
        <Button>Bar</Button>
    </ItemsControl>

    <ItemsControl Style="{StaticResource ICStyle}">
        <Button>Foo</Button>
        <Button>Bar</Button>
        <Button>Baz</Button>
    </ItemsControl>
</StackPanel>

【讨论】：