locked
Automatically hiding a column with a grid splitter when the column size hits a specific width RRS feed

  • Question

  • Hi there!

    Basically, I have a grid with 3 columns (0,1,2) with column 1 containing a grid splitter.

    When I slide the grid splitter over to the right to hide column 2, when column 2 gets to a certain limit I'd like it to automatically set the width to zero.

    First of all - is this possible?

    If so, could somebody point me in the right direction please.

    Thanks

    Mike

    Thursday, April 12, 2012 3:07 PM

Answers

  • Hey Mikey.

    Now that I read your second post, I'm wondering if the ChangePropertyAction behavior wouldn't be better.  If you used it, instead of firing on an event you could use a propertyChanged trigger with conditions. 

    I'm not on a computer with Blend so can't provide an example, but take a look at this post from K.S. 

    http://social.expression.microsoft.com/Forums/en-US/blend/thread/3abc7e9e-768f-46ed-a796-fb493fcc78fc

    and read my post, the second one on setting up the animation.  It was a bit buggy for me and I had to manually set the xaml up, particularly the duration.  But K.S. was trying to accomplish the same sort of animation with a grid row.   You could do it with the column width and trigger it when the column gets below a certain size.

    ~Christine

    • Marked as answer by _MikeyB Tuesday, May 22, 2012 8:07 AM
    Friday, April 13, 2012 12:35 PM

All replies

  • Hi Mikey.

    I am not sure if I am even coming close to what you are looking for, but when I first read your post I immediately thought of using a converter.

    For example add the following converter class file to your project...

    using System;
    using System.Windows.Data;
    
    namespace WpfApplication14
    {
    	public class ColumnWidth : IValueConverter
    	{
    		public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
    			double a = System.Convert.ToDouble(value);
    			if (a > 150)
    				return 0;
    			else
    				return 200;
            }
    
            public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
            {
                throw new NotImplementedException();
            }
    	}
    }

    And then bind the column width to the GridSplitter.Width...

    	<Grid x:Name="LayoutRoot">
    		<Grid Margin="8,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="300">
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="100"/>
    				<ColumnDefinition Width="{Binding Width, Converter={StaticResource ColumnWidth}, ElementName=gridSplitter}"/>
    				<ColumnDefinition Width="100"/>
    			</Grid.ColumnDefinitions>
    			<Rectangle Fill="Blue" Grid.Column="0"/>
    			<Rectangle Grid.Column="1" Fill="Red"/>
    			<Rectangle Fill="Green" Grid.Column="2"/>
    			<GridSplitter x:Name="gridSplitter" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Black" ShowsPreview="true" Width="{Binding Value, ElementName=slider, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    		</Grid>
    		<Slider x:Name="slider" VerticalAlignment="Bottom" Margin="8,0,0,107" HorizontalAlignment="Left" Width="300" Maximum="200" SmallChange="1" Value="10"/>
    	</Grid>


    Basically in the above example, if the GridSplitter gets to be over 150 then the column width goes to 0.    I just used a slider to manipulate the gridSplitter width.

    I hope you get it solved quickly and easily.

    ~Christine


    I didn't show the XAML resource refrence...

    <Window
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	xmlns:local="clr-namespace:WpfApplication14"
    	x:Class="WpfApplication14.MainWindow"
    	x:Name="Window"
    	Title="MainWindow"
    	Width="640" Height="480">
    
    	<Window.Resources>
    		<local:ColumnWidth x:Key="ColumnWidth"/>
    	</Window.Resources>
    
    	<Grid x:Name="LayoutRoot">
    		<Grid Margin="8,8,0,0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="300">
    			<Grid.ColumnDefinitions>
    				<ColumnDefinition Width="100"/>
    				<ColumnDefinition Width="{Binding Width, Converter={StaticResource ColumnWidth}, ElementName=gridSplitter}"/>
    				<ColumnDefinition Width="100"/>
    			</Grid.ColumnDefinitions>
    			<Rectangle Fill="Blue" Grid.Column="0"/>
    			<Rectangle Grid.Column="1" Fill="Red"/>
    			<Rectangle Fill="Green" Grid.Column="2"/>
    			<GridSplitter x:Name="gridSplitter" Grid.Column="1" HorizontalAlignment="Left" VerticalAlignment="Stretch" Background="Black" ShowsPreview="true" Width="{Binding Value, ElementName=slider, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/>
    		</Grid>
    		<Slider x:Name="slider" VerticalAlignment="Bottom" Margin="8,0,0,107" HorizontalAlignment="Left" Width="300" Maximum="200" SmallChange="1" Value="10"/>
    	</Grid>
    </Window>


    Thursday, April 12, 2012 6:48 PM
  • Thanks Christine - that pretty much is what I was looking for.

    I'll try to explain a little more just to make things clearer - lets say I have a list of data within a data grid on the left, and in the right column I have a document viewer - when they select a row in the data grid it shows the relevant document in the right column.

    The columns are of course separated by a grid splitter.

    Now - they can expand/contract the columns depending on whether they actually want to see the document viewer.

    I was trying to make the UI a little more intuitive so that when the document viewer got LESS than around 150 pixels (I.E too small to read the document) then it plays a storyboard and reduces it to zero.

    What you have given me has put me in the right direction so I'll get cracking on!

    Much appreciated.

    Mike


    Friday, April 13, 2012 8:10 AM
  • Hey Mikey.

    Now that I read your second post, I'm wondering if the ChangePropertyAction behavior wouldn't be better.  If you used it, instead of firing on an event you could use a propertyChanged trigger with conditions. 

    I'm not on a computer with Blend so can't provide an example, but take a look at this post from K.S. 

    http://social.expression.microsoft.com/Forums/en-US/blend/thread/3abc7e9e-768f-46ed-a796-fb493fcc78fc

    and read my post, the second one on setting up the animation.  It was a bit buggy for me and I had to manually set the xaml up, particularly the duration.  But K.S. was trying to accomplish the same sort of animation with a grid row.   You could do it with the column width and trigger it when the column gets below a certain size.

    ~Christine

    • Marked as answer by _MikeyB Tuesday, May 22, 2012 8:07 AM
    Friday, April 13, 2012 12:35 PM