Question

当用户减小窗口宽度时，我想知道如何“隐藏”网格列。

例如，我有简单的网格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>

alt text

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

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

alt text

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

我不认为这是合适的方式。你知道吗？感谢

Answer 1

你可以尝试：

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

Answer 2

如果要保持列间隔原样，可以添加水平滚动条，以便在调整屏幕大小时，用户仍然可以看到其他列：

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

Answer 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();
    }
}

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

3 个答案: