Уменьшить ширину столбца сетки, когда уменьшается ширина окна

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>

Теперь пользователь начинает уменьшать ширину окна.

Я хотел бы сначала «скрыть» номер столбца 3, затем 2, затем 1 и как последний столбецчисло 0.

Я думаю об использовании конвертера по ширине столбцов и ширине привязки окна.В конвертере я могу вычислить ширину столбца.

Я не думаю, что это подходящий способ.У тебя есть идеи?Спасибо

Answer 1

Если вы хотите оставить столбцы на расстоянии друг от друга, вы можете добавить горизонтальную полосу прокрутки, чтобы при изменении размера экрана пользователь мог видеть другие столбцы:

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

Answer 2

Оки, поведение, что мне нужно, можно достичь с помощью этого кода:

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

Answer 3

Вы можете попробовать:

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