Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

wpf - Fill all available space in ItemsComtrol with same width size of elements

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

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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

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

Example:

enter image description here

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...