Increasing Node Size

2 posts, 0 answers
  1. Syed Asad
    Syed  Asad avatar
    1 posts
    Member since:
    Jul 2004

    Posted 27 Dec 2011 Link to this post

    hi
    the tree view UI is perfect in ie and firefox on system but if i browse on Ipad the [+] add node visual to small is there is any way to increase the size of node that give me help on visualized on ipad.
  2. Hristo
    Admin
    Hristo avatar
    352 posts

    Posted 29 Dec 2011 Link to this post

    Hello,

    In order to provide better usability in touch environments you could increase the font of the header of every RadTreeViewItem like follows:

    <telerik:RadTreeViewItem>
        <telerik:RadTreeViewItem.Header>
            <TextBlock Text="Item 1" FontSize="20"/>
        </telerik:RadTreeViewItem.Header>
    </telerik:RadTreeViewItem>

    Also you could use the ExpanderStyle property to set the style of the expander. If you want to set one and the same expander to all items you should use RadTreeView.ExpanderStyle. If you are to set different expander styles to some tree view item you should use RadTReeViewItem.ExpanderStyle.

    <Grid>
        <Grid.Resources>
            <Style x:Key="ExpanderStyle_1" TargetType="ToggleButton">
                <Setter Property="Visibility" Value="Visible" />
                <Setter Property="BorderThickness" Value="3" />
                <Setter Property="BorderBrush" Value="Blue" />
            </Style>
     
            <Style x:Key="ExpanderStyle_2" TargetType="ToggleButton">
                <Setter Property="Visibility" Value="Visible" />
                <Setter Property="BorderThickness" Value="3" />
                <Setter Property="BorderBrush" Value="Red" />
            </Style>
        </Grid.Resources>
     
        <telerik:RadTreeView ExpanderStyle="{StaticResource ExpanderStyle_1}">
            <telerik:RadTreeViewItem ExpanderStyle="{StaticResource ExpanderStyle_2}">
                <telerik:RadTreeViewItem.Header>
                    <TextBlock Text="Item 1" FontSize="20"/>
                </telerik:RadTreeViewItem.Header>
                <telerik:RadTreeViewItem Header="Item 2"/>
                <telerik:RadTreeViewItem Header="Item 3"/>
                <telerik:RadTreeViewItem Header="Item 4"/>
            </telerik:RadTreeViewItem>
             
            <telerik:RadTreeViewItem Header="Item 5">
                <telerik:RadTreeViewItem Header="Item 6"/>
                <telerik:RadTreeViewItem Header="Item 7"/>
                <telerik:RadTreeViewItem Header="Item 8"/>
            </telerik:RadTreeViewItem>
            <telerik:RadTreeViewItem Header="Item 9"/>
        </telerik:RadTreeView>
    </Grid>
    Greetings,
    Hristo
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. UI for WPF is Visual Studio 2017 Ready
Back to Top