locked
creating and controlling column width through code binding RRS feed

  • Question

  • I am trying to figure out a way to to generate a data determined number of columns and be able to set the width ( by *) of them through data binding. I need to make a varying numbers or objects that will maintain a size relative to each other but would would adjust to fit the window size. Column are the only way I am aware of doing this but have not been able to figure out how to create columns in side something with and items control. Is there a something specific to use for this or a different way to adjust things by percentage?

    thanks

    breht

    Thursday, November 10, 2011 1:56 AM

Answers

  • There are probably better ways to do this, but I don't know all of your requirements. Maybe using the SL Charting Toolkit? I think a stacked bar chart does what you are suggesting above (but then again, that might have just been an example).

    If you don't know the number of columns at design time, you will probably have to do it all in code. If you know the number of columns, you can databind the width property of the ColumnDefinitions to particular values in your data context.

    Here is an example of setting everything in code, when hit the button it will create something similar to what you posted above:

    public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			// Required to initialize variables
    			InitializeComponent();
    		}
    
    		private void Go(object sender, System.Windows.RoutedEventArgs e)
    		{
    			this.TargetGrid.ColumnDefinitions.Clear();
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) });
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(20, GridUnitType.Star) });
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) });
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(40, GridUnitType.Star) });
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(20, GridUnitType.Star) });
    			
    			var child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Red);
    			Grid.SetColumn(child, 0);
    			this.TargetGrid.Children.Add(child);
    
    			child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Green);
    			Grid.SetColumn(child, 1);
    			this.TargetGrid.Children.Add(child);
    
    			child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Blue);
    			Grid.SetColumn(child, 2);
    			this.TargetGrid.Children.Add(child);
    
    			child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Orange);
    			Grid.SetColumn(child, 3);
    			this.TargetGrid.Children.Add(child);
    
    			child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Purple);
    			Grid.SetColumn(child, 4);
    			this.TargetGrid.Children.Add(child);
    		}
    	}
    
    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="SilverlightApplication5.MainPage"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Border Height="124" Margin="100,86,122,0" VerticalAlignment="Top" BorderBrush="Red" BorderThickness="2">
    			<Grid x:Name="TargetGrid"/>
    		</Border>
    		<Button Content="Go" HorizontalAlignment="Left" Height="76" Margin="142,0,0,124" VerticalAlignment="Bottom" Width="116" Click="Go"/>
    	</Grid>
    </UserControl>
    



    • Marked as answer by breht Monday, November 14, 2011 10:56 PM
    Friday, November 11, 2011 3:23 PM
    Moderator

All replies

  • Could you post an image of the scenario? I'm not entirely clear on what you are trying to accomplish.
    Thursday, November 10, 2011 2:53 PM
    Moderator
  • It sounds like maybe you want a UniformGrid control?
    Thursday, November 10, 2011 2:55 PM
    Moderator
  • sorry for the poor description. It is basically a pie chart but a bar instead of a circle,  Here is an example ( the number of square and their widths would all be data driven) there are 6 squares their width would represent the percentage of the graph they consume. This graph has to fill the screens width 

    [10][ 20 ][10][  40  ][ 20 ]

    Thank you so much for the help

     

    as I understand the UniformGrid the size of the column are all the same and fixed these columns would all vary, I was attempting to work a DataGrid for my purposes but have not gotten it to work out yet.

     

    thanks again

    Breht

    Thursday, November 10, 2011 8:35 PM
  • There are probably better ways to do this, but I don't know all of your requirements. Maybe using the SL Charting Toolkit? I think a stacked bar chart does what you are suggesting above (but then again, that might have just been an example).

    If you don't know the number of columns at design time, you will probably have to do it all in code. If you know the number of columns, you can databind the width property of the ColumnDefinitions to particular values in your data context.

    Here is an example of setting everything in code, when hit the button it will create something similar to what you posted above:

    public partial class MainPage : UserControl
    	{
    		public MainPage()
    		{
    			// Required to initialize variables
    			InitializeComponent();
    		}
    
    		private void Go(object sender, System.Windows.RoutedEventArgs e)
    		{
    			this.TargetGrid.ColumnDefinitions.Clear();
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) });
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(20, GridUnitType.Star) });
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(10, GridUnitType.Star) });
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(40, GridUnitType.Star) });
    			this.TargetGrid.ColumnDefinitions.Add(new ColumnDefinition() { Width = new GridLength(20, GridUnitType.Star) });
    			
    			var child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Red);
    			Grid.SetColumn(child, 0);
    			this.TargetGrid.Children.Add(child);
    
    			child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Green);
    			Grid.SetColumn(child, 1);
    			this.TargetGrid.Children.Add(child);
    
    			child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Blue);
    			Grid.SetColumn(child, 2);
    			this.TargetGrid.Children.Add(child);
    
    			child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Orange);
    			Grid.SetColumn(child, 3);
    			this.TargetGrid.Children.Add(child);
    
    			child = new Rectangle();
    			child.Fill = new SolidColorBrush(Colors.Purple);
    			Grid.SetColumn(child, 4);
    			this.TargetGrid.Children.Add(child);
    		}
    	}
    
    <UserControl
    	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    	x:Class="SilverlightApplication5.MainPage"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<Border Height="124" Margin="100,86,122,0" VerticalAlignment="Top" BorderBrush="Red" BorderThickness="2">
    			<Grid x:Name="TargetGrid"/>
    		</Border>
    		<Button Content="Go" HorizontalAlignment="Left" Height="76" Margin="142,0,0,124" VerticalAlignment="Bottom" Width="116" Click="Go"/>
    	</Grid>
    </UserControl>
    



    • Marked as answer by breht Monday, November 14, 2011 10:56 PM
    Friday, November 11, 2011 3:23 PM
    Moderator
  • thanks for you help this was basically the conclusion I was coming to, though I will look into the charting toolkit.

     

    thanks again

    Breht

    Monday, November 14, 2011 11:01 PM