CODEWITHSUNDEEP
c#wpf
Kiang Teng
Kiang Teng

Reputation: 1705

Display certain contents depending on width of grid

enter image description here

Lets say I have a 2 x 2 grid. They contain contents of different importance.

Cells (0,0) and (0,1) have important info. Cells (1,0) and (1,1) have less important info.

When I resize my window, the dimensions of the grids change as well. How do I not show the non-important cells when the grids are beyond a threshold width.

I have considered some kind of value converter that binds visibility to the min-width, but is there a less hackish way to do this?

Upvotes: 2

Views: 82

Answers (1)

mancaus
mancaus

Reputation: 3011

There may be a more elegant way to do this, but the following works.

It uses a trigger to set the MaxWidth property of the right column's ColumnDefinition to 0 when the window width falls below a threshold.

XAML:

<Window x:Class="Misc.Window1"
        x:Name="Window1Name"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300" SizeChanged="Window1_SizeChanged">
    <Grid TextBlock.FontSize="40">
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition x:Name="RightColumn">
                <ColumnDefinition.Style>
                    <Style>
                        <Style.Triggers>
                            <DataTrigger Binding="{Binding ElementName=Window1Name, Path=HideRightColumn}" Value="True">
                                <Setter Property="ColumnDefinition.MaxWidth" Value="0"/>
                            </DataTrigger>
                        </Style.Triggers>
                    </Style>
                </ColumnDefinition.Style>
            </ColumnDefinition>
        </Grid.ColumnDefinitions>
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">0,0</TextBlock>
        <TextBlock Grid.Row="1" HorizontalAlignment="Center" VerticalAlignment="Center">0,1</TextBlock>
        <TextBlock Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">1,0</TextBlock>
        <TextBlock Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center" VerticalAlignment="Center">1,1</TextBlock>
    </Grid>
</Window>

Code behind:

public partial class Window1 : Window, INotifyPropertyChanged
{
    public Window1()
    {
        InitializeComponent();
    }

    public bool HideRightColumn
    {
        get
        {
            return this.Width < 200;
        }
    }

    private void Window1_SizeChanged(object sender, SizeChangedEventArgs e)
    {
        if (PropertyChanged != null) PropertyChanged(this, new PropertyChangedEventArgs("HideRightColumn"));
    }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    #endregion
}

Upvotes: 1

Related Questions