How to make a nested grid expand to fill it's container?

16 replies. Latest Post by samw on September 4, 2009.

(0)

Member

67 points

How to make a nested grid expand to fill it's container?

08-24-2009 3:50 PM |

In the xaml below, I want the grid inside the HierarchicalDataTemplate to expand to the width of it's container (treeView).

The outside grid (LayoutRoot) appears to fill the entire control as evidenced by the green border.

However the inside grid is only as wide as it's controls as evidenced by the black border.

I do not understand why this occurs. Or perhaps I just need help with borders.

When I'm done I want to be able to size the outer control and have the inside controls size themselves.

Thanks

<UserControl x:Class="PersonalWebsiteAdmin.tvtest"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    Width="1000" Height="300">
    <Border BorderBrush="Green" BorderThickness="4">
    <Grid x:Name="LayoutRoot" Background="White"  >
        <Grid.Resources>
            <common:HierarchicalDataTemplate x:Key="myHierarchicalTemplate" ItemsSource="{Binding Items}" >
                <Border x:Name="brdTest" BorderBrush="Black" BorderThickness="2" >
                    <Grid>
                        <Grid.RowDefinitions>
                            <RowDefinition Height=".2*"></RowDefinition>
                            <RowDefinition Height=".2*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding myString}" Grid.Row="0" Grid.Column="0" />
                        <TextBox Text="test" ></TextBox>
                        <Button Content="Test"  Grid.Row="1" Grid.Column="0"></Button>
                    </Grid>
                </Border>
            </common:HierarchicalDataTemplate>
        </Grid.Resources>
        <Border x:Name="brdTest2" BorderBrush="Red" BorderThickness="2" >
        <controls:TreeView x:Name="trv" ItemsSource="{Binding}" ItemTemplate="{StaticResource myHierarchicalTemplate}" Width="500" />
        </Border>
    </Grid>
    </Border>
</UserControl>

pkr2000

Participant

1219 points

377 Posts

Re: How to make a nested grid expand to fill it's container?

08-24-2009 4:47 PM |

Have you tried HorizontalAlignment stretch?

samw

Member

67 points

124 Posts

Re: How to make a nested grid expand to fill it's container?

08-24-2009 4:52 PM |

Thank you for your reply,

Yes I tried it, it does nothing.

pkr2000

Participant

1219 points

377 Posts

Re: How to make a nested grid expand to fill it's container?

08-24-2009 5:24 PM |

Just tried your sample without the data template and it worked fine.

samw

Member

67 points

124 Posts

Re: How to make a nested grid expand to fill it's container?

08-24-2009 5:49 PM |

It doesnt work for me. The black border is around the controls only, about 30px wide. I want the grid and the textbox to take up the full width of the control.

The XAML for the host page is:

<StackPanel Orientation="Vertical" Width="1000">
  <project:tvtest></project:tvtest>
</StackPanel>

Here is codebeind if you want to try the control as I posted it. Thanks for your help.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace PersonalWebsiteAdmin
{
    public partial class tvtest : UserControl
    {
        public tvtest()
        {
            InitializeComponent();
            blah();
        }

        void blah()
        {

            trv.DataContext = new ObservableCollection()

                                  {
                                      new myItem("Hello",
                                          new myItem("World"),
                                          new myItem("Foo"),
                                          new myItem("Bar")),
                                      new myItem("Moo",
                                          new myItem("Boo",
                                            new myItem("Goo"))),
                                  };

        }



        public class myItem
        {

            public myItem(string myString)
            {
                this.myString = myString;
            }

            public myItem(string myString, params myItem[] myItems)  : this(myString)
            {
                ObservableCollection itemsObservableCollection = new ObservableCollection();
                
                foreach (var item in myItems)
                    itemsObservableCollection.Add(item);
                
                Items = itemsObservableCollection;
            }
            public string myString { get; set; }
            public ObservableCollection Items { get; set; }
        }
    }
}

pkr2000

Participant

1219 points

377 Posts

Re: How to make a nested grid expand to fill it's container?

08-24-2009 6:01 PM |

Start with the simple grid/border/grid/button, that works fine. Then add the other controls to find which one is causing the problems. Then if it's still not obvious you could use Silverlight Spy to see what "hidden" property is restricting the inner grid.

samw

Member

67 points

124 Posts

Re: How to make a nested grid expand to fill it's container?

08-24-2009 7:30 PM |

The following example is as dumb as I could make at and still demonstrate the issue. I cant spend anymore time on it I will probably try to find a way to set it in code. If anyone can explain why the outer grid expands to the width of its container and the inner one does not I will appreciate it. Thanks!

<UserControl x:Class="PersonalWebsiteAdmin.tvtest2"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"
    xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
    Width="1000" Height="300">
    <Border BorderBrush="Green" BorderThickness="4">
        <Grid x:Name="LayoutRoot" Background="White"  >
            <controls:TreeView x:Name="trv" ItemsSource="{Binding}" Width="500" BorderThickness="4" BorderBrush="Purple">
                <controls:TreeView.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Blue" BorderThickness="4">
                            <Grid>
                                <Border BorderBrush="Yellow" BorderThickness="4">
                                    <TextBlock Text="Hello"></TextBlock>
                                </Border>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </controls:TreeView.ItemTemplate>
            </controls:TreeView>
        </Grid>
    </Border>
</UserControl>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace PersonalWebsiteAdmin
{
    public partial class tvtest2 : UserControl
    {
        public tvtest2()
        {
            InitializeComponent();
            blah();
        }

        void blah()
        {

            trv.DataContext = new ObservableCollection()

                                  {
                                      new myItem("Hello",
                                          new myItem("World"),
                                          new myItem("Foo"),
                                          new myItem("Bar")),
                                      new myItem("Moo",
                                          new myItem("Boo",
                                            new myItem("Goo"))),
                                  };

        }



        public class myItem
        {

            public myItem(string myString)
            {
                this.myString = myString;
            }

            public myItem(string myString, params myItem[] myItems)  : this(myString)
            {
                ObservableCollection itemsObservableCollection = new ObservableCollection();
                
                foreach (var item in myItems)
                    itemsObservableCollection.Add(item);
                
                Items = itemsObservableCollection;
            }
            public string myString { get; set; }
            public ObservableCollection Items { get; set; }
        }
    }
}

pkr2000

Participant

1219 points

377 Posts

Re: How to make a nested grid expand to fill it's container?

08-25-2009 2:55 AM |

The initial border in the template will size according to its content not its parent. So if you put a fixed value in there you'll see it grow. So you could programmatically set the width to the parent or via element binding.

Mog Lian...

All-Star

15884 points

1,541 Posts

Re: How to make a nested grid expand to fill it's container?

08-28-2009 4:57 AM |

Hi,

From your description, I understand that you want to stretch TreeviewItem to fill the treeview width. If I misunderstood you, please correct me.

ItemTemplate is not the right place to custom treeviewtiem, you could try use ItemContainerStyle.

Here is a sample.

	<UserControl.Resources>
		<ControlTemplate x:Key="CommonValidationToolTipTemplate" TargetType="ToolTip">
			<Grid x:Name="Root" Margin="5,0" Opacity="0" RenderTransformOrigin="0,0">
				<VisualStateManager.VisualStateGroups>
					<VisualStateGroup x:Name="OpenStates">
						<VisualStateGroup.Transitions>
							<VisualTransition GeneratedDuration="0"/>
							<VisualTransition GeneratedDuration="0:0:0.2" To="Open">
								<Storyboard>
									<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0">
										<DoubleAnimation.EasingFunction>
											<BackEase Amplitude=".3" EasingMode="EaseOut"/>
										</DoubleAnimation.EasingFunction>
									</DoubleAnimation>
									<DoubleAnimation Duration="0:0:0.2" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1"/>
								</Storyboard>
							</VisualTransition>
						</VisualStateGroup.Transitions>
						<VisualState x:Name="Closed">
							<Storyboard>
								<DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0"/>
							</Storyboard>
						</VisualState>
						<VisualState x:Name="Open">
							<Storyboard>
								<DoubleAnimation Duration="0" Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0"/>
								<DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1"/>
							</Storyboard>
						</VisualState>
					</VisualStateGroup>
				</VisualStateManager.VisualStateGroups>
				<Grid.RenderTransform>
					<TranslateTransform x:Name="Translation" X="-25"/>
				</Grid.RenderTransform>
				<Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5"/>
				<Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4"/>
				<Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3"/>
				<Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2"/>
				<Border Background="#FFDC000C" CornerRadius="2">
					<TextBlock Margin="8,4,8,4" MaxWidth="250" UseLayoutRounding="false" Foreground="#FFFFFFFF" Text="{Binding (Validation.Errors)[0].Exception.Message}" TextWrapping="Wrap"/>
				</Border>
			</Grid>
		</ControlTemplate>
		<Style x:Key="TreeViewItemStyle1" TargetType="controls:TreeViewItem">
			<Setter Property="Padding" Value="3"/>
			<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
			<Setter Property="VerticalContentAlignment" Value="Stretch"/>
			<Setter Property="Background" Value="Transparent"/>
			<Setter Property="BorderThickness" Value="1"/>
			<Setter Property="Cursor" Value="Arrow"/>
			<Setter Property="IsTabStop" Value="True"/>
			<Setter Property="TabNavigation" Value="Once"/>
			<Setter Property="Margin" Value="0 1 0 0"/>
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="controls:TreeViewItem">
						<Grid Background="Black">
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver"/>
									<VisualState x:Name="Pressed"/>
									<VisualState x:Name="Disabled">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<SolidColorBrush Color="#FF999999"/>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="SelectionStates">
									<VisualState x:Name="Unselected"/>
									<VisualState x:Name="Selected">
										<Storyboard>
											<DoubleAnimation Duration="0" Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" To=".75"/>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="SelectedInactive">
										<Storyboard>
											<DoubleAnimation Duration="0" Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" To=".2"/>
											<ColorAnimation Duration="0" Storyboard.TargetName="SelectionFill" Storyboard.TargetProperty="Color" To="#FF999999"/>
											<ColorAnimation Duration="0" Storyboard.TargetName="SelectionStroke" Storyboard.TargetProperty="Color" To="#FF333333"/>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="HasItemsStates">
									<VisualState x:Name="HasItems"/>
									<VisualState x:Name="NoItems">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="ExpansionStates">
									<VisualState x:Name="Collapsed"/>
									<VisualState x:Name="Expanded">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
								<VisualStateGroup x:Name="ValidationStates">
									<VisualState x:Name="Valid"/>
									<VisualState x:Name="InvalidUnfocused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="InvalidFocused">
										<Storyboard>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
												<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
											</ObjectAnimationUsingKeyFrames>
											<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">
												<DiscreteObjectKeyFrame KeyTime="0">
													<DiscreteObjectKeyFrame.Value>
														<System:Boolean>True</System:Boolean>
													</DiscreteObjectKeyFrame.Value>
												</DiscreteObjectKeyFrame>
											</ObjectAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Grid.RowDefinitions>
								<RowDefinition Height="Auto"/>
								<RowDefinition Height="*"/>
							</Grid.RowDefinitions>
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="15"/>
								<ColumnDefinition Width="Auto"/>
								<ColumnDefinition Width="*"/>
							</Grid.ColumnDefinitions>
							<ToggleButton x:Name="ExpanderButton" IsTabStop="False" TabNavigation="Once" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
								<ToggleButton.Template>
									<ControlTemplate TargetType="ToggleButton">
										<Grid x:Name="Root" Background="Transparent">
											<VisualStateManager.VisualStateGroups>
												<VisualStateGroup x:Name="CommonStates">
													<VisualState x:Name="Normal"/>
													<VisualState x:Name="MouseOver">
														<Storyboard>
															<ColorAnimation Duration="0" Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="(Path.Stroke).Color" To="#FF1BBBFA"/>
														</Storyboard>
													</VisualState>
													<VisualState x:Name="Disabled">
														<Storyboard>
															<DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To=".7"/>
														</Storyboard>
													</VisualState>
												</VisualStateGroup>
												<VisualStateGroup x:Name="CheckStates">
													<VisualState x:Name="Unchecked"/>
													<VisualState x:Name="Checked">
														<Storyboard>
															<DoubleAnimation Duration="0" Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0"/>
															<DoubleAnimation Duration="0" Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1"/>
														</Storyboard>
													</VisualState>
												</VisualStateGroup>
											</VisualStateManager.VisualStateGroups>
											<Grid HorizontalAlignment="Right" Margin="2 2 5 2">
												<Path x:Name="UncheckedVisual" Fill="#FFFFFFFF" Stroke="#FF989898" StrokeLineJoin="Miter" StrokeThickness="1" Height="9" HorizontalAlignment="Right" VerticalAlignment="Center" Width="6" Data="M 0,0 L 0,9 L 5,4.5 Z"/>
												<Path x:Name="CheckedVisual" Fill="#FF262626" StrokeLineJoin="Miter" Height="6" HorizontalAlignment="Center" VerticalAlignment="Center" Width="6" Opacity="0" Data="M 6,0 L 6,6 L 0,6 Z"/>
											</Grid>
										</Grid>
									</ControlTemplate>
								</ToggleButton.Template>
							</ToggleButton>
							<Rectangle x:Name="Selection" StrokeThickness="1" RadiusX="2" RadiusY="2" IsHitTestVisible="False" Opacity="0" Grid.Column="1">
								<Rectangle.Stroke>
									<SolidColorBrush x:Name="SelectionStroke" Color="#FF6DBDD1"/>
								</Rectangle.Stroke>
								<Rectangle.Fill>
									<SolidColorBrush x:Name="SelectionFill" Color="#FFBADDE9"/>
								</Rectangle.Fill>
							</Rectangle>
							<!--Set Grid.ColumnSpan=2 -->
							<Button x:Name="Header" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Foreground="{TemplateBinding Foreground}" IsTabStop="False" TabNavigation="Once" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" ClickMode="Hover" Grid.Column="1" Grid.ColumnSpan="2">
								<Button.Template>
									<ControlTemplate TargetType="Button">
										<Grid Background="{TemplateBinding Background}">
											<VisualStateManager.VisualStateGroups>
												<VisualStateGroup x:Name="CommonStates">
													<VisualState x:Name="Normal"/>
													<VisualState x:Name="Pressed">
														<Storyboard>
															<DoubleAnimation Duration="0" Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity" To=".5"/>
														</Storyboard>
													</VisualState>
													<VisualState x:Name="Disabled">
														<Storyboard>
															<DoubleAnimation Duration="0" Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" To=".55"/>
														</Storyboard>
													</VisualState>
												</VisualStateGroup>
											</VisualStateManager.VisualStateGroups>
											<Rectangle x:Name="Hover" Fill="#FFBADDE9" Stroke="#FF6DBDD1" StrokeThickness="1" RadiusX="2" RadiusY="2" IsHitTestVisible="False" Opacity="0"/>
											<!--Set HorizontalAlignment to Stretch -->
											<ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="Stretch" Margin="{TemplateBinding Padding}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
										</Grid>
									</ControlTemplate>
								</Button.Template>
								<ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}"/>
							</Button>
							<Border x:Name="Validation" Visibility="Collapsed" Grid.Column="1" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
								<ToolTipService.ToolTip>
									<ToolTip x:Name="ValidationToolTip" Template="{StaticResource CommonValidationToolTipTemplate}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" Placement="Right" PlacementTarget="{Binding ElementName=Header}"/>
								</ToolTipService.ToolTip>
								<Grid Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10" Background="Transparent">
									<Path Fill="#FFDC000C" Margin="-1,3,0,0" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z"/>
									<Path Fill="#FFFFFFFF" Margin="-1,3,0,0" Data="M 0,0 L2,0 L 8,6 L8,8"/>
								</Grid>
							</Border>
							<ItemsPresenter x:Name="ItemsHost" Visibility="Collapsed" Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="1"/>
						</Grid>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
	</UserControl.Resources>

    <Border BorderBrush="Green" BorderThickness="4">
        <Grid x:Name="LayoutRoot" Background="White"  >
            <controls:TreeView x:Name="trv" ItemsSource="{Binding}" Width="500" BorderThickness="4" BorderBrush="Purple" ItemContainerStyle="{StaticResource TreeViewItemStyle1}">
                <controls:TreeView.ItemTemplate>
                    <DataTemplate>
                        <Border BorderBrush="Blue" BorderThickness="4">
                            <Grid>
                                <Border BorderBrush="Yellow" BorderThickness="4">
                                    <TextBlock Text="Hello"/>
                                </Border>
                            </Grid>
                        </Border>
                    </DataTemplate>
                </controls:TreeView.ItemTemplate>
            </controls:TreeView>
        </Grid>
    </Border>

Please have a test.

Thanks,

Mog Liang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

samw

Member

67 points

124 Posts

Re: How to make a nested grid expand to fill it's container?

08-28-2009 3:22 PM |

Mog, thank you so much for your reply. I have been struggling with this for several days. I will test it shortly.

Regards,

Sam

samw

Member

67 points

124 Posts

Re: How to make a nested grid expand to fill it's container?

08-30-2009 3:00 PM |

Mog, from what I interpret from your post, you placed the treeview item content inside a modified button control. Is that correct? This seems like a lot of trouble for what should be a simple task.

It appears I'm not the first to have this problem. This blog author has the same problem and he posts a solution related to WPF. I'm still working on understanding his solution.

The author cited above thinks the behavior is inconsistent and I agree. A PITA if nothing more.

samw

Member

67 points

124 Posts

Re: How to make a nested grid expand to fill it's container?

09-03-2009 11:19 PM |

I am not able to make the posted template work. The reasons why will be obvious to anyone to anyone who attempts to implement it.

I can not figure this out myself.

Microsoft please post a working template.

Thank you.

Mog Lian...

All-Star

15884 points

1,541 Posts

Re: How to make a nested grid expand to fill it's container?

09-04-2009 12:02 AM |

Hi,

Is this the appearance you want to have on treeview?

If you need the code, i could upload project.

Thanks,

Mog Liang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

samw

Member

67 points

124 Posts

Re: How to make a nested grid expand to fill it's container?

09-04-2009 12:49 AM |

Hello, Mog

> Is this the appearance you want to have on treeview?

No the expander buttons are not visible and do not work.

Mog Lian...

All-Star

15884 points

1,541 Posts

Re: How to make a nested grid expand to fill it's container?

09-04-2009 12:59 AM |

I set treeviewitem background to black for debuging, remove the background will see the triangle button

Project file

http://cid-810abc231aab1c6e.skydrive.live.com/self.aspx/.Public/treeview%7C_test1.zip

Mog Liang
Microsoft Online Community Support

Please remember to mark the replies as answers if they help and unmark them if they provide no help.

samw

Member

67 points

124 Posts

Re: How to make a nested grid expand to fill it's container?

09-04-2009 1:02 AM |

I think I might have found an answer. As usual, right after I post that I've given up. This is a result of my very best guesswork.

Here is TreeViewTemplate.xaml (add to App.xaml as ResourceDictionary):

<ResourceDictionary
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
	xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
	xmlns:system="clr-namespace:System;assembly=mscorlib">
	<!-- Resource dictionary entries should be defined here. -->




<ControlTemplate x:Key="CommonValidationToolTipTemplate" TargetType="ToolTip">
    <Grid x:Name="Root" Margin="5,0" RenderTransformOrigin="0,0" Opacity="0">
        <Grid.RenderTransform>
            <TranslateTransform x:Name="Translation" X="-25" />
        </Grid.RenderTransform>
        <vsm:VisualStateManager.VisualStateGroups>
            <vsm:VisualStateGroup Name="OpenStates">
                <vsm:VisualStateGroup.Transitions>
                    <vsm:VisualTransition GeneratedDuration="0" />
                    <vsm:VisualTransition To="Open" GeneratedDuration="0:0:0.2">
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0" Duration="0:0:0.2">
                                <DoubleAnimation.EasingFunction>
                                    <BackEase Amplitude=".3" EasingMode="EaseOut" />
                                </DoubleAnimation.EasingFunction>
                            </DoubleAnimation>
                            <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.2" />
                        </Storyboard>
                    </vsm:VisualTransition>
                </vsm:VisualStateGroup.Transitions>
                <vsm:VisualState x:Name="Closed">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                    </Storyboard>
                </vsm:VisualState>
                <vsm:VisualState x:Name="Open">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="Translation" Storyboard.TargetProperty="X" To="0" Duration="0" />
                        <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                    </Storyboard>
                </vsm:VisualState>
            </vsm:VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>

        <Border Margin="4,4,-4,-4" Background="#052A2E31" CornerRadius="5" />
        <Border Margin="3,3,-3,-3" Background="#152A2E31" CornerRadius="4" />
        <Border Margin="2,2,-2,-2" Background="#252A2E31" CornerRadius="3" />
        <Border Margin="1,1,-1,-1" Background="#352A2E31" CornerRadius="2" />

        <Border Background="#FFDC000C" CornerRadius="2">
            <TextBlock UseLayoutRounding="false" Foreground="#FFFFFFFF" Margin="8,4,8,4" MaxWidth="250" TextWrapping="Wrap" Text="{Binding (Validation.Errors)[0].Exception.Message}" />
        </Border>
    </Grid>
</ControlTemplate>



<Style TargetType="controls:TreeViewItem" x:Key="tweakedTVITemplate">
    <Setter Property="Padding" Value="3" />
    <Setter Property="HorizontalContentAlignment" Value="Left" />
    <Setter Property="VerticalContentAlignment" Value="Top" />
    <Setter Property="Background" Value="Transparent" />
    <Setter Property="BorderThickness" Value="1" />
    <Setter Property="Cursor" Value="Arrow" />
    <Setter Property="IsTabStop" Value="True" />
    <Setter Property="TabNavigation" Value="Once" />
    <Setter Property="Margin" Value="0 1 0 0" />
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="controls:TreeViewItem">
                <Grid Background="{x:Null}">
                    <vsm:VisualStateManager.VisualStateGroups>
                        <vsm:VisualStateGroup x:Name="CommonStates">
                            <vsm:VisualState x:Name="Normal" />
                            <vsm:VisualState x:Name="MouseOver" />
                            <vsm:VisualState x:Name="Pressed" />
                            <vsm:VisualState x:Name="Disabled">
                                <!--<Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Foreground" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <SolidColorBrush Color="#FF999999" />
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>-->
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="SelectionStates">
                            <vsm:VisualState x:Name="Unselected" />
                            <vsm:VisualState x:Name="Selected">
                                <!--<Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" Duration="0" To=".75" />
                                </Storyboard>-->
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="SelectedInactive">
                                <!--<Storyboard>
                                    <DoubleAnimation Storyboard.TargetName="Selection" Storyboard.TargetProperty="Opacity" Duration="0" To=".2" />
                                    <ColorAnimation Storyboard.TargetName="SelectionFill" Storyboard.TargetProperty="Color" Duration="0" To="#FF999999" />
                                    <ColorAnimation Storyboard.TargetName="SelectionStroke" Storyboard.TargetProperty="Color" Duration="0" To="#FF333333" />
                                </Storyboard>-->
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="HasItemsStates">
                            <vsm:VisualState x:Name="HasItems" />
                            <vsm:VisualState x:Name="NoItems">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ExpanderButton" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ExpansionStates">
                            <vsm:VisualState x:Name="Collapsed" />
                            <vsm:VisualState x:Name="Expanded">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ItemsHost" Storyboard.TargetProperty="Visibility" Duration="0">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                        <vsm:VisualStateGroup x:Name="ValidationStates">
                            <vsm:VisualState x:Name="Valid" />
                            <vsm:VisualState x:Name="InvalidUnfocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                            <vsm:VisualState x:Name="InvalidFocused">
                                <Storyboard>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Validation" Storyboard.TargetProperty="Visibility">
                                        <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                    </ObjectAnimationUsingKeyFrames>
                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ValidationToolTip" Storyboard.TargetProperty="IsOpen">
                                        <DiscreteObjectKeyFrame KeyTime="0">
                                            <DiscreteObjectKeyFrame.Value>
                                                <system:Boolean>True</system:Boolean>
                                            </DiscreteObjectKeyFrame.Value>
                                        </DiscreteObjectKeyFrame>
                                    </ObjectAnimationUsingKeyFrames>
                                </Storyboard>
                            </vsm:VisualState>
                        </vsm:VisualStateGroup>
                    </vsm:VisualStateManager.VisualStateGroups>
                    <Grid.RowDefinitions>
                        <RowDefinition Height="Auto" />
                        <RowDefinition Height="*" />
                    </Grid.RowDefinitions>
                    <!--<Grid.ColumnDefinitions>
                        <ColumnDefinition Width="15" />
                        <ColumnDefinition Width="Auto" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>-->
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" MinWidth="15" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        

                        <ToggleButton x:Name="ExpanderButton" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" IsTabStop="False" TabNavigation="Once">
                        <ToggleButton.Template>
                            <ControlTemplate TargetType="ToggleButton">
                                <Grid x:Name="Root" Background="Transparent">
                                    <vsm:VisualStateManager.VisualStateGroups>
                                        <vsm:VisualStateGroup x:Name="CommonStates">
                                            <vsm:VisualState x:Name="Normal" />
                                            <vsm:VisualState x:Name="MouseOver">
                                                <Storyboard>
                                                    <ColorAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="(Path.Stroke).Color" To="#FF1BBBFA" Duration="0" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                            <vsm:VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To=".7" Duration="0" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                        </vsm:VisualStateGroup>
                                        <vsm:VisualStateGroup x:Name="CheckStates">
                                            <vsm:VisualState x:Name="Unchecked" />
                                            <vsm:VisualState x:Name="Checked">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="UncheckedVisual" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
                                                    <DoubleAnimation Storyboard.TargetName="CheckedVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                        </vsm:VisualStateGroup>
                                    </vsm:VisualStateManager.VisualStateGroups>
                                    <Grid HorizontalAlignment="Right" Margin="2 2 5 2">
                                        <Path x:Name="UncheckedVisual" Width="6" Height="9" Fill="#FFFFFFFF" VerticalAlignment="Center" HorizontalAlignment="Right" Data="M 0,0 L 0,9 L 5,4.5 Z" StrokeThickness="1" StrokeLineJoin="Miter">
                                            <Path.Stroke>
                                                <SolidColorBrush Color="#FF989898" />
                                            </Path.Stroke>
                                        </Path>
                                        <Path x:Name="CheckedVisual" Opacity="0" Width="6" Height="6" Fill="#FF262626" VerticalAlignment="Center" HorizontalAlignment="Center" Data="M 6,0 L 6,6 L 0,6 Z" StrokeLineJoin="Miter" />
                                    </Grid>
                                </Grid>
                            </ControlTemplate>
                        </ToggleButton.Template>
                    </ToggleButton>
                    <!--<Rectangle x:Name="Selection" Grid.Column="1" Opacity="0" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2">
                        <Rectangle.Fill>
                            <SolidColorBrush x:Name="SelectionFill" Color="#FFBADDE9" />
                        </Rectangle.Fill>
                        <Rectangle.Stroke>
                            <SolidColorBrush x:Name="SelectionStroke" Color="#FF6DBDD1" />
                        </Rectangle.Stroke>
                    </Rectangle>
                    <Button x:Name="Header" Grid.Column="1" ClickMode="Hover" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsTabStop="False" TabNavigation="Once">
                        <Button.Template>
                            <ControlTemplate TargetType="Button">
                                <Grid Background="{TemplateBinding Background}">
                                    <vsm:VisualStateManager.VisualStateGroups>
                                        <vsm:VisualStateGroup x:Name="CommonStates">
                                            <vsm:VisualState x:Name="Normal" />
                                            <vsm:VisualState x:Name="Pressed">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="Hover" Storyboard.TargetProperty="Opacity" Duration="0" To=".5" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                            <vsm:VisualState x:Name="Disabled">
                                                <Storyboard>
                                                    <DoubleAnimation Storyboard.TargetName="Content" Storyboard.TargetProperty="Opacity" Duration="0" To=".55" />
                                                </Storyboard>
                                            </vsm:VisualState>
                                        </vsm:VisualStateGroup>
                                    </vsm:VisualStateManager.VisualStateGroups>
                                    <Rectangle x:Name="Hover" Opacity="0" Fill="#FFBADDE9" Stroke="#FF6DBDD1" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2" />
                                    <ContentPresenter x:Name="Content" Cursor="{TemplateBinding Cursor}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Left" Margin="{TemplateBinding Padding}" />
                                </Grid>
                            </ControlTemplate>
                        </Button.Template>
                        <Button.Content>
                            
                            
                            
                        </Button.Content>
                    </Button>-->
                    <ContentPresenter Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Grid.Column="1" />
                    
                    <Border x:Name="Validation" Grid.Column="1" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="#FFDB000C" CornerRadius="2" Visibility="Collapsed">
                        <ToolTipService.ToolTip>
                            <ToolTip x:Name="ValidationToolTip" Template="{StaticResource CommonValidationToolTipTemplate}" Placement="Right" PlacementTarget="{Binding ElementName=Header}" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" IsHitTestVisible="True" />
                        </ToolTipService.ToolTip>
                        <Grid Width="10" Height="10" HorizontalAlignment="Right" Margin="0,-4,-4,0" VerticalAlignment="Top" Background="Transparent">
                            <Path Margin="-1,3,0,0" Fill="#FFDC000C" Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 Z" />
                            <Path Margin="-1,3,0,0" Fill="#FFFFFFFF" Data="M 0,0 L2,0 L 8,6 L8,8" />
                        </Grid>
                    </Border>

                    <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="1" Grid.ColumnSpan="1" Visibility="Collapsed" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

</ResourceDictionary>

Here is a test control tvtest3.xaml

  <UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
	xmlns:common="clr-namespace:System.Windows;assembly=System.Windows.Controls"
	xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls"
	mc:Ignorable="d"
	x:Class="PersonalWebsiteAdmin.tvtest3"
	d:DesignWidth="640" d:DesignHeight="480">

	<Grid x:Name="LayoutRoot">
	<controls:TreeView x:Name="trv" ItemsSource="{Binding}" Width="900" BorderThickness="4" BorderBrush="Purple" ItemContainerStyle="{StaticResource tweakedTVITemplate}" HorizontalAlignment="Stretch" >
        <controls:TreeView.ItemTemplate>
                <common:HierarchicalDataTemplate ItemsSource="{Binding Items}" >
                    <Border BorderBrush="Yellow" BorderThickness="4" Background="BlueViolet" HorizontalAlignment="Stretch">
                        <TextBlock Text="{Binding myString}"></TextBlock>
                    </Border>
                </common:HierarchicalDataTemplate>
            </controls:TreeView.ItemTemplate>
    </controls:TreeView>
	</Grid>
</UserControl>
 Here is tvtest3.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Collections.ObjectModel;

namespace PersonalWebsiteAdmin
{
	public partial class tvtest3 : UserControl
	{
		public tvtest3()
		{
			// Required to initialize variables
			InitializeComponent();
            blah();    
        }

        void blah()
        {

            trv.DataContext = new ObservableCollection()

                                  {
                                      new myItem("Hello",
                                          new myItem("Item1"),
                                          new myItem("Item2"),
                                          new myItem("Item3")),
                                      new myItem("Moo",
                                          new myItem("Boo",
                                            new myItem("Goo"))),
                                  };
            
        }



        public class myItem
        {

            public myItem(string myString)
            {
                this.myString = myString;
            }

            public myItem(string myString, params myItem[] myItems)  : this(myString)
            {
                ObservableCollection itemsObservableCollection = new ObservableCollection();
                
                foreach (var item in myItems)
                    itemsObservableCollection.Add(item);
                
                Items = itemsObservableCollection;
            }
            public string myString { get; set; }
            public ObservableCollection Items { get; set; }
        }


	}
}