【问题标题】:How can I make my Grid Columns always be the same width?如何使我的网格列始终具有相同的宽度?
【发布时间】:2011-09-26 17:24:41
【问题描述】:

如果我将列的宽度设置为*,它们最初的宽度相同,但如果一个项目大于允许的数量,那么它将拉伸列宽。

如何通过明确定义大小来强制我的 Grid 保持其列的大小相同?

我不能使用 UniformGrid,因为此 Grid 正在 ItemsControl 中使用,并且项目需要放置在特定的 Grid.Row/Grid.Column 点中

编辑这是我当前代码的示例。

<DockPanel>

    <!-- Not showing code here for simplicity -->
    <local:ColumnHeaderControl DockPanel.Dock="Top" />
    <local:RowHeaderControl DockPanel.Dock="Left" />

    <ItemsControl ItemsSource="{Binding Events}">
        <ItemsControl.ItemContainerStyle>
            <Style>
                <Setter Property="Grid.Column" 
                        Value="{Binding DueDate.DayOfWeek, 
                            Converter={StaticResource EnumToIntConverter}}" />
            </Style>
        </ItemsControl.ItemContainerStyle>

        <ItemsControl.ItemsPanel>
            <ItemsPanelTemplate>
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                </Grid>
            </ItemsPanelTemplate>
        </ItemsPanel>
    </ItemsControl>

</DockPanel>

编辑#2这是我的最终解决方案。它使列的大小正确,并在应用程序调整大小时保持正确的大小。

<ColumnDefinition Width="{Binding 
    ElementName=RootControl, 
    Path=ActualWidth, 
    Converter={StaticResource MathConverter}, 
    ConverterParameter=(@VALUE-150)/7}" />

150 是行标题的宽度 + 所有边距和边框。我实际上正在将我的MathConverter 更新为IMultiValueConverter,因此我可以绑定两个参数(如果您对转换器代码感兴趣,可以找到here,尽管它只是单值转换器)

【问题讨论】:

    标签: wpf xaml grid


    【解决方案1】:

    你可以:

    1) 在 DIP 中硬编码一个尺寸:

    <ColumnDefinition Width="100" />
    <ColumnDefinition Width="100" />
    ...
    

    2) 使用 SharedSizeGroup,它需要一个字符

    <ColumnDefinition SharedSizeGroup="A" />
    <ColumnDefinition SharedSizeGroup="A" />
    ...
    

    您可以阅读更多关于它的信息here

    【讨论】:

    • 我不想硬编码宽度,因为网格会占用所有可用空间,而 SharedSizeGroup 使所有项目的宽度与最大项目的宽度相同
    • 你能发布一些代码吗?行为很奇怪。星号大小的列只应在调整容器大小时调整大小,内容不起作用。
    • 对于选项 2,您必须为周围的网格设置 &lt;Grid Grid.IsSharedSizeScope="True"&gt;
    【解决方案2】:

    您可以尝试将列的宽度绑定到一个属性,该属性将窗口的总宽度除以列数

    【讨论】:

    • 我现在正在尝试,但我遇到的问题是网格没有占用全部空间,所以我还必须计算边距、其他控件宽度等,然后再可以计算除以 7 的大小。我的基本面板是一个 DockPanel,标题根据需要动态绘制,然后 ItemsControl 的内容占据了所有剩余空间。
    【解决方案3】:

    最干净的方法是像这样使用UniformGrid

    <UniformGrid Rows="1">
        <Rectangle Fill="Blue" />
        <Rectangle Fill="Yellow" />
        <Rectangle Fill="Red" />
    </UniformGrid>
    

    用作ItemsPanel 时特别好。

    【讨论】:

    • 正如我在问题中所说,我不能使用 UniformGrid,因为项目需要放置在特定的 Grid.Row/Grid.Column 位置,并且不要填充网格中的每个正方形。跨度>
    【解决方案4】:

    我没有尝试过,但我认为这应该可行:

    XAML:

    <ColumnDefinition Width="*" Loaded="ColumnDefinition_Loaded"/>
    

    C#:

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

    【讨论】:

    • 问题是,如果一个项目比* 允许的宽,它会将列拉伸到超出该大小。您发布的代码只会使所有列等于最大列宽,我不希望这样。
    • 您是否真的尝试使用相同的处理程序设置所有 ColumnDefinations - ColumnDefinition_Loaded?代码应将所有最大宽度设置为任何值(* 允许)。之后,放入的任何物品都不应改变大小。
    • 是的,我做到了,它使所有列的宽度与最大的项目一样宽,这使得网格的一部分不显示,因为我没有水平滚动条。此外,标题不再排列,如果用户调整应用程序的大小,它也不会自动调整大小。
    • 好吧,我尝试手动添加项目,这就是为什么我猜它没有以这种方式显示给我的原因。抱歉,但我想唯一的解决方案是按照 msmucker0527 的建议手动计算。
    【解决方案5】:

    尝试网格的 IsSharedSizeScope 工作:

    <StackPanel Margin="15" Grid.IsSharedSizeScope="True">
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="Auto" SharedSizeGroup="B"/>
            </Grid.ColumnDefinitions>
    
            <TextBlock Grid.Column="0" Text="Col 1"/>
            <TextBox Grid.Column="1" />
            <TextBlock Grid.Column="2" Text="3rd column here"/>
        </Grid>
    
        <Separator Margin="0,20"/>
    
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" SharedSizeGroup="A"/>
                <ColumnDefinition />
                <ColumnDefinition SharedSizeGroup="B"/>
            </Grid.ColumnDefinitions>
    
            <TextBlock Grid.Column="0" Text="1"/>
            <TextBox Grid.Column="1"/>
        </Grid>
    </StackPanel>
    

    希望对你有帮助。

    有关详细说明,请查看此链接: https://wpf.2000things.com/tag/sharedsizegroup/

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-12
      • 2019-08-23
      • 1970-01-01
      • 2022-10-20
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多