减小窗口宽度时减小网格列的宽度答案

【问题标题】：Decrease width of grid column when is decreasing window width减小窗口宽度时减小网格列的宽度
【发布时间】：2011-01-23 19:19:33
【问题描述】：

我想要一种在用户减小窗口宽度时如何“隐藏”网格列的方法。

例如，我有简单的网格 4 列和行。

代码很简单：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="172" Width="775">
    <Grid ShowGridLines="True">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <TextBlock Grid.Column="0" Grid.Row="0" Margin="20,5,20,5" FontSize="25">0.0</TextBlock>
        <TextBlock Grid.Column="0" Grid.Row="1" Margin="20,5,20,5" FontSize="25">0.1</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="0" Margin="20,5,20,5" FontSize="25">1.0</TextBlock>
        <TextBlock Grid.Column="1" Grid.Row="1" Margin="20,5,20,5" FontSize="25">1.1</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="0" Margin="20,5,20,5" FontSize="25">2.0</TextBlock>
        <TextBlock Grid.Column="2" Grid.Row="1" Margin="20,5,20,5" FontSize="25">2.1</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="0" Margin="20,5,20,5" FontSize="25">3.0</TextBlock>
        <TextBlock Grid.Column="3" Grid.Row="1" Margin="20,5,20,5" FontSize="25">3.1</TextBlock>
    </Grid> 
</Window>

现在用户开始减小窗口宽度。

我想先“隐藏”第 3 列，然后是 2，然后是 1，最后是第 0 列。

我正在考虑在列宽和窗口绑定宽度上使用转换器。在转换器中，我可以计算列宽。

我不认为这是合适的方式。你有什么想法吗？谢谢

【问题讨论】：

@user572844：当您更改窗口的宽度时，您希望列完全调整大小，还是希望它们具有固定宽度？
Meleak 我编辑了我的问题。我尝试实现这种行为。如果用户减小窗口宽度，隐藏的第一列是第 3 列，而不是第 2 列，第 1 列和第 0 列可以固定 MinWidth。对不起我的英语，我是 16 岁的波兰人，描述我需要什么有很大的问题。你还不懂我吗？

标签： wpf grid

【解决方案1】：

你可以试试：

<Grid ShowGridLines="True" MinWidth="775">

【讨论】：

但是有了这个，我实现了第一列保持可见，但我最需要“隐藏”第 3 列的编号，而不是 2，而不是 1，而不是 0。
当您减小窗口宽度时，第 3 列被隐藏，然后是第 2 列和第 1 列。这不正是您想要的吗？是不是缩小窗口宽度时显示部分列的问题？

【解决方案2】：

如果您想保持列的间距不变，您可以添加一个水平滚动条，以便在调整屏幕大小时用户仍然可以看到其他列：

    <ScrollViewer HorizontalScrollBarVisibility="Auto">
        <Grid Width="400" ...>
            ...
        </Grid>
    </ScrollViewer>

【讨论】：

【解决方案3】：

Oki，我需要用这段代码实现的行为：

<ColumnDefinition       Width="{Binding ElementName=ChatWindow, Path=Width, Mode=OneWay, 
UpdateSourceTrigger=PropertyChanged, 
Converter={StaticResource columnsWidthConverter}, 
ConverterParameter=Col0}"/>

<ColumnDefinition       Width="{Binding ElementName=ChatWindow, Path=Width, Mode=OneWay, 
UpdateSourceTrigger=PropertyChanged, 
Converter={StaticResource columnsWidthConverter}, 
ConverterParameter=Col1}"/>

<ColumnDefinition       Width="{Binding ElementName=ChatWindow, Path=Width, Mode=OneWay, 
UpdateSourceTrigger=PropertyChanged, 
Converter={StaticResource columnsWidthConverter}, 
ConverterParameter=Col2}"/>

<ColumnDefinition       Width="{Binding ElementName=ChatWindow, Path=Width, Mode=OneWay, 
UpdateSourceTrigger=PropertyChanged, 
Converter={StaticResource columnsWidthConverter}, 
ConverterParameter=Col3}"/>

<ColumnDefinition       Width="{Binding ElementName=ChatWindow, Path=Width, Mode=OneWay, 
UpdateSourceTrigger=PropertyChanged, 
Converter={StaticResource columnsWidthConverter}, 
ConverterParameter=Col4}"/>

列宽转换器：

public class ColumnsWidthConverter : IValueConverter
{

    Dictionary<string, int> _columnToMinimumRequiredWidthMapping = new Dictionary<string, int>()
    {
        { "col0", 0 },
        { "col1", 270 },
        { "col2", 520 },
        { "col3", 770 },
        { "col4", 1020 }
    };

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
    {
        string colName = parameter.ToString();
        int windowWidth = System.Convert.ToInt32(value.ToString());
        const int colWidth = 180;

        if (_columnToMinimumRequiredWidthMapping.ContainsKey(colName))
        {
            return windowWidth >= _columnToMinimumRequiredWidthMapping[colName] ? colWidth : 0;
        }

        return colWidth;
    }


    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

【讨论】：