locked
Silverlight 3 - Space above/below TreeView items RRS feed

  • Question

  • I'm trying to reduce the amount of space between TreeView items to fit more vertically.  I'm guessing that it's a matter of styling the ItemContainer Style or ItemContainer template in the TreeView, but I can't seem to get at the correct properties.  Can anyone point me in the right direction?

    Tuesday, May 12, 2009 9:48 AM

Answers

All replies

  • Hi,

    Below is the style which I used in Silverlight 2 to display something like this:

    Grand Parent

                       Parent 1

                                    Child 1

                                    Child 2

                       Parent 2

                                    Child 3

    Every child node will start at the end of its Parent node.

    <UserControl.Resources>
            <Style x:Key="treeviewstyle" TargetType="Toolkit:TreeView">
                <Setter Property="Background" Value="#FFFFFFFF" />
                <Setter Property="Foreground" Value="#FF000000" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Top" />
                <Setter Property="Cursor" Value="Arrow" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Padding" Value="1" />
                <Setter Property="BorderBrush">
                    <Setter.Value>
                        <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                            <GradientStop Color="#FFA3AEB9" Offset="0" />
                            <GradientStop Color="#FF8399A9" Offset="0.375" />
                            <GradientStop Color="#FF718597" Offset="0.375" />
                            <GradientStop Color="#FF617584" Offset="1" />
                        </LinearGradientBrush>
                    </Setter.Value>
                </Setter>
                <Setter Property="IsTabStop" Value="False" />
                <Setter Property="TabNavigation" Value="Once" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Toolkit:TreeView">
                            <Grid x:Name="Root">
                                <Grid.Resources>
                                    <SolidColorBrush x:Key="BorderBrush" Color="#FF000000" />
                                </Grid.Resources>
                                <Border x:Name="Border" BorderBrush="{StaticResource BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2">
                                    <Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" Margin="0.5">
                                        <ScrollViewer x:Name="svTreeView" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Background="{x:Null}" BorderBrush="Transparent" BorderThickness="0" IsTabStop="False" TabNavigation="Once">
                                            <ItemsPresenter x:Name="TreeItems" Margin="5" />
                                        </ScrollViewer>
                                    </Border>
                                </Border>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
            <!--  Toolkit:TreeViewItem  -->
            <Style x:Key="treeviewitemstyle" TargetType="Toolkit:TreeViewItem">
                <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="IsExpanded" Value="True" />
                <Setter Property="FontSize" Value="10"></Setter>
                <Setter Property="FontFamily" Value="Verdana"></Setter>
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="Toolkit:TreeViewItem">
                            <Grid Background="{x:Null}">
                                <vsm:VisualStateManager.VisualStateGroups>
                                    <vsm:VisualStateGroup x:Name="CommonStates">
                                        <vsm:VisualState x:Name="Normal" />
                                        <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="select" Storyboard.TargetProperty="Opacity" Duration="0" To=".75" />
                                            </Storyboard>
                                        </vsm:VisualState>
                                        <vsm:VisualState x:Name="SelectedInactive">
                                            <Storyboard>
                                                <DoubleAnimation Storyboard.TargetName="inactive" Storyboard.TargetProperty="Opacity" Duration="0" To=".2" />
                                            </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: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" 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="select" Grid.Column="1" Opacity="0" Fill="#FFBADDE9" Stroke="#FF6DBDD1" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2" />
                                <Rectangle x:Name="inactive" Grid.Column="1" Opacity="0" Fill="#FF999999" Stroke="#FF333333" StrokeThickness="1" IsHitTestVisible="False" RadiusX="2" RadiusY="2" />
                                <Button x:Name="Header" Grid.Column="1" ClickMode="Hover" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" Background="{TemplateBinding Background}" Foreground="{TemplateBinding Foreground}" Cursor="{TemplateBinding Cursor}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" IsTabStop="False" TabNavigation="Once">
                                    <Button.Template>
                                        <ControlTemplate TargetType="Button">
                                            <Grid Background="{TemplateBinding Background}" Margin="1">
                                                <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>
                                <ItemsPresenter x:Name="ItemsHost" Grid.Row="1" Grid.Column="2" Visibility="Collapsed" />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </UserControl.Resources>

    <Toolkit:TreeView x:Name="tvTimeLineTypes" Style="{StaticResource treeviewstyle}" Width="510" 
                                                                VerticalAlignment="Top" HorizontalContentAlignment="Center"
                                                                HorizontalAlignment="Center" Height="230" />

    In Code Behind I have assign the style for Nodes

    TreeViewItem node = new TreeViewItem(); 

    node.Style = Resources["treeviewitemstyle"] as Style;

    Hope it helps you. Smile

    Please "Mark as Answer" if this post answered your question. :)

    Tuesday, May 12, 2009 10:59 AM
  • Thanks,

    Unfortunately, this doesn't seem to help me...

    1. I already have a similar style, so I need to find the specific property in that style to modify to get the effect that I want.
    2. Your style affects the horizontal space, not the vertical.  Do you know which property in that style affects that spacing?  If so, it may lead me to where I need to be.
    Tuesday, May 12, 2009 12:51 PM
  • Tuesday, May 12, 2009 1:25 PM