如何使包含ItemsControl的WPF网格具有相等大小的列

时间:2015-03-03 09:42:47

标签: c# .net wpf

herehere也存在类似的问题,但我已经尝试了其中的所有内容,并且无法解决我的问题。

我想在WPF(布局)网格中的屏幕上显示一个checkBoxes网格。这些复选框具有可变长度文本。我希望所有列都具有相同的宽度,并且它们都显示文本而不截断。也就是说,我需要它们都具有最长文本的宽度。我希望屏幕本身的大小适合内容。也就是说,要足够宽以显示所有复选框。

复选框列表根据其他因素而变化,所以我使用ItemsControl来显示它们。下面是代码的简化版本。

如果你运行它,带有'Long Text'的列(第二列)比带有较短文本的列宽得多。为了使它们具有相同的宽度,我尝试使用SharedSizeGroup,并尝试在列加载事件中设置MaxWidth = ActualWidth,这是其他地方建议的解决方案,但这些不起作用。

我确信必须有一个简单的答案,这似乎是一个相当基本的事情,想要做一个布局控制。我做错了什么?

XAML:

<Window x:Class="GridColsEqualSize.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" SizeToContent="WidthAndHeight" FontSize="25">
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*" />
            <RowDefinition Height="Auto" /> <!-- In the real project second row is for OK/Cancel buttons -->
        </Grid.RowDefinitions>
        <ItemsControl ItemsSource="{Binding CheckBoxItems}"  Grid.Row="0" Grid.Column="0">
            <ItemsControl.ItemsPanel>
                <ItemsPanelTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <!--Whatever I do I can't get the screen to resize and the cols to have the same width-->
                            <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                            <ColumnDefinition Width="Auto" SharedSizeGroup="A" />
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                            <RowDefinition Height="Auto" />
                        </Grid.RowDefinitions>
                    </Grid>
                </ItemsPanelTemplate>
            </ItemsControl.ItemsPanel>
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <CheckBox Content="{Binding Text}" IsChecked="{Binding Enabled}"                            
                                  Margin="0,0,10,0"></CheckBox>
                </DataTemplate>
            </ItemsControl.ItemTemplate>
            <ItemsControl.ItemContainerStyle>
                <Style>
                    <Style.Setters>
                        <Setter Property="Grid.Row" Value="{Binding GridRow}" />
                        <Setter Property="Grid.Column" Value="{Binding GridColumn}" />
                    </Style.Setters>
                </Style>
            </ItemsControl.ItemContainerStyle>
        </ItemsControl>
    </Grid>
</Window>

C#:

    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            DataContext = this;
            CheckBoxItems = new List<CheckBoxItem>
            {
                new CheckBoxItem("A", true),
                new CheckBoxItem("B"),
                new CheckBoxItem("C", true),
                new CheckBoxItem("D"),
                new CheckBoxItem("E", true),
                new CheckBoxItem("F"),
                new CheckBoxItem("G"),
                new CheckBoxItem("Long text", true),
                new CheckBoxItem("")

            };
            SetCheckBoxItemRowsAndColumns();
        }

        public List<CheckBoxItem> CheckBoxItems { get; set; }

        private void SetCheckBoxItemRowsAndColumns()
        {
            int currentColumn = 0;
            int currentRow = 0;
            foreach (CheckBoxItem checkBoxItem in CheckBoxItems)
            {
                checkBoxItem.GridColumn = currentColumn;
                checkBoxItem.GridRow = currentRow;
                if (currentColumn != 2)
                {
                    currentColumn++;
                }
                else
                {
                    currentRow++;
                    currentColumn = 0;
                }
            }
        }

        public class CheckBoxItem
        {
            public CheckBoxItem(string text, bool enabled = false)
            {
                Text = text;
                Enabled = enabled;
            }

            public string Text { get; set; }
            public bool Enabled { get; set; }
            public int GridRow { get; set; }
            public int GridColumn { get; set; }
        }

        private void FrameworkContentElement_OnLoaded(object sender, RoutedEventArgs e)
        {
            ((ColumnDefinition)sender).MaxWidth = ((ColumnDefinition)sender).ActualWidth;
        }
    }

1 个答案:

答案 0 :(得分:3)

一切都很好:)你选择了正确的解决方案'SharedSizeGroup'

您只需将Grid.IsSharedSizeScope =“True”添加到ItemsControl:

    ...
    </Grid.RowDefinitions>
    <ItemsControl Grid.IsSharedSizeScope="True" ItemsSource="{Binding CheckBoxItems}"  Grid.Row="0" Grid.Column="0" >
        <ItemsControl.ItemsPanel>
    ...