使用相同宽度大小的元素填充 ItemsComtrol 中的所有可用空间 [英] Fill all available space in ItemsComtrol with same width size of elements

问题描述

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

I have an ItemsControl, the ItemsPanel is made by a DockPanel.

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

Inside of the DockPanel, I can have one, two, or three buttons. The problem arises from the width of the buttons: I want the three elements with the same size, but the elements take the size that they need (the last element take the excess width because LastChildFill is true).

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

Can I give the buttons the same width without providing their size manually?

    <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>

推荐答案

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

A UniformGrid with a single row will do what you want:

<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>

这篇关于使用相同宽度大小的元素填充 ItemsComtrol 中的所有可用空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！