This is a migrated thread and some comments may be shown as answers.

Why the data of second column shifted to right due to treview Child display

8 Answers 133 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

ss asked on 11 Sep 2014, 09:16 AM

zz1.png

zz2.png

I have 3 different columns
First contains some text block and one row also contains a treeview (see "Clearing Prices" in snap shot attached). second column contains again textblock (its absent in case of treeview child) . Whereas the third columpn contains button which shifts little bit in right .
What i want is to i want to allign the data of third column (buttons)just below each other. This disturbance of allignment (shift in right of third column) is due to the child of TreeView ("ClearingPrices").

My code to do this is :

<ControlTemplate x:Key="TreeViewItemDefaultTemplate"

TargetType="telerik:RadTreeViewItem">

<Style TargetType="telerik:RadTreeViewItem" x:Key="TreeViewItemStyle">

<Setter Property="IsExpanded" Value="True" />

<Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />

</Style>

<telerik:RadTreeView Grid.Row="2" Name="RadTreeViewObj" Margin="50" Background="{StaticResource BGBrush_1}" BorderBrush="{StaticResource BGBrush_1}" ItemsSource="{Binding EODDataStepsCollection}" SelectionMode="Single" ItemContainerStyle="{StaticResource TreeViewItemStyle}" >

<telerik:RadTreeView.ItemTemplate>

<telerik:HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<toolkit:BusyIndicator Grid.Column="0" BusyContent="Server requesting ..." IsBusy="{Binding IsRequested}" DisplayAfter="0" Padding="0" >

<TextBlock Grid.Column="0" Text="{Binding Label}" FontWeight="Bold" Margin="10" Height="23" Width="400" HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="{Binding Status, Converter={StaticResource EODStatusFGConverter}}"/>

</toolkit:BusyIndicator>

<TextBlock Grid.Column="1" Text="{Binding StatusLabel}" Margin="10" Height="23" Width="170" HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Foreground="{Binding Status, Converter={StaticResource EODStatusFGConverter}}"/>

<toolkit:BusyIndicator HorizontalAlignment="Right" Grid.Column="2" BusyContent="Server requesting ..." IsBusy="{Binding IsRequested}" DisplayAfter="0" Padding="0">

<Button Content="{Binding ButtonLabel}" Style="{StaticResource ButtonStyle_Blue}" Padding="5" Margin="10" HorizontalAlignment="Right" VerticalAlignment="Center" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" IsEnabled="{Binding StepEnabled}" Command="{Binding ButtonStepCommand}"/>

</toolkit:BusyIndicator>

</Grid>

</telerik:HierarchicalDataTemplate>

</telerik:RadTreeView.ItemTemplate>

</telerik:RadTreeView>

8 Answers, 1 is accepted

answered on 11 Sep 2014, 03:04 PM

Here is my full code if you need that



<

UserControl x:Class="SilverAM.EndOfDayPage"

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:viewmodel="clr-namespace:ViewModel;assembly=ViewModel"

xmlns:sys="clr-namespace:System;assembly=mscorlib"

xmlns:local="clr-namespace:SilverAM"

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

xmlns:toolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit"

mc:Ignorable="d"

d:DesignHeight="300" d:DesignWidth="400" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk">

<UserControl.DataContext>

<viewmodel:EndOfDayViewModel/>

</UserControl.DataContext>

<UserControl.Resources>

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_MouseOver"

Color="#FFFFC92B" />

<Thickness x:Key="ControlSubItem_OuterBorderThickness">0</Thickness>

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_MouseOver"

Color="#FFFFFFFF" />

<Thickness x:Key="ControlSubItem_InnerBorderThickness">0</Thickness>

<!--<LinearGradientBrush x:Key="ControlSubItem_Background_MouseOver"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFFFFBA3"

Offset="1" />

<GradientStop Color="#FFFFFBDA"

Offset="0" />

</LinearGradientBrush>-->

<SolidColorBrush x:Key="ControlSubItem_Background_MouseOver"

Color="Transparent" />

<CornerRadius x:Key="ControlSubItem_InnerCornerRadius">0</CornerRadius>

<CornerRadius x:Key="ControlSubItem_OuterCornerRadius">1</CornerRadius>

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_UnFocus"

Color="#FFdbdbdb" />

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_UnFocus"

Color="Transparent" />

<!--<LinearGradientBrush x:Key="ControlSubItem_Background_UnFocus"

EndPoint="0,1">

<GradientStop Color="#FFf8f6f9"

Offset="0" />

<GradientStop Color="#FFf0f0f0"

Offset="1" />

</LinearGradientBrush>-->

<SolidColorBrush x:Key="ControlSubItem_Background_UnFocus"

Color="Transparent" />

<SolidColorBrush x:Key="ControlSubItem_OuterBorder_Selected"

Color="#FFFFC92B" />

<SolidColorBrush x:Key="ControlSubItem_InnerBorder_Selected"

Color="#FFFFFFFF" />

<!--<LinearGradientBrush x:Key="ControlSubItem_Background_Selected"

EndPoint="0.5,1"

StartPoint="0.5,0">

<GradientStop Color="#FFFCE79F"

Offset="1" />

<GradientStop Color="#FFFDD3A8" />

</LinearGradientBrush>-->

<SolidColorBrush x:Key="ControlSubItem_Background_Selected"

Color="Transparent" />

<SolidColorBrush x:Key="TreeView_LineColor"

Color="#FFCCCCCC" />

<telerik:Office_BlackTheme x:Key="Theme" />

<SolidColorBrush x:Key="FocusBrushBlack"

Color="Transparent" />

<ControlTemplate x:Key="TreeViewItemDefaultTemplate"

TargetType="telerik:RadTreeViewItem">

<Grid x:Name="RootElement">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

<RowDefinition />

</Grid.RowDefinitions>

<VisualStateManager.VisualStateGroups>

<VisualStateGroup x:Name="EditStates">

<VisualState x:Name="Display" />

<VisualState x:Name="Edit">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="EditHeaderElement">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="Header">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="CommonStates">

<VisualState x:Name="Normal" />

<VisualState x:Name="Disabled">

<Storyboard>

<DoubleAnimation Duration="0:0:0.0"

To="0.35"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="Header" />

<DoubleAnimation Duration="0:0:0.0"

To="0.35"

Storyboard.TargetProperty="Opacity"

Storyboard.TargetName="Image" />

</Storyboard>

</VisualState>

<VisualState x:Name="MouseOver">

<Storyboard>

<DoubleAnimation Duration="0:0:0.1" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverVisual"/>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="SelectionStates">

<VisualState x:Name="Unselected" />

<VisualState x:Name="Selected">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="SelectionVisual">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="SelectedUnfocused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="SelectionUnfocusedVisual">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

</VisualStateGroup>

<VisualStateGroup x:Name="LoadingOnDemandStates">

<VisualState x:Name="LoadingOnDemand">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="LoadingVisual">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="Expander">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Collapsed" />

</ObjectAnimationUsingKeyFrames>

<DoubleAnimation Duration="0:0:1"

From="0"

RepeatBehavior="Forever"

To="359"

Storyboard.TargetProperty="Angle"

Storyboard.TargetName="LoadingVisualAngleTransform" />

</Storyboard>

</VisualState>

<VisualState x:Name="LoadingOnDemandReverse" />

</VisualStateGroup>

<VisualStateGroup x:Name="FocusStates">

<VisualState x:Name="Focused">

<Storyboard>

<ObjectAnimationUsingKeyFrames Duration="0"

Storyboard.TargetProperty="Visibility"

Storyboard.TargetName="FocusVisual">

<DiscreteObjectKeyFrame KeyTime="0"

Value="Visible" />

</ObjectAnimationUsingKeyFrames>

</Storyboard>

</VisualState>

<VisualState x:Name="Unfocused" />

</VisualStateGroup>

<VisualStateGroup x:Name="ExpandStates">

<VisualState x:Name="Expanded" />

<VisualState x:Name="Collapsed" />

</VisualStateGroup>

</VisualStateManager.VisualStateGroups>

<Grid x:Name="HeaderRow"

Background="Transparent"

MinHeight="{TemplateBinding MinHeight}">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

<ColumnDefinition Width="*" />

</Grid.ColumnDefinitions>

<Border BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}"

Background="{TemplateBinding Background}"

Grid.ColumnSpan="6"

Grid.Column="2"

CornerRadius="2" />

<Border x:Name="MouseOverVisual"

BorderBrush="{StaticResource ControlSubItem_OuterBorder_MouseOver}"

BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}"

Grid.ColumnSpan="6"

Grid.Column="2"

CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"

Opacity="0">

<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_MouseOver}"

BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"

Background="{StaticResource ControlSubItem_Background_MouseOver}"

CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}" />

</Border>

<Border x:Name="SelectionUnfocusedVisual"

BorderBrush="{StaticResource ControlSubItem_OuterBorder_UnFocus}"

BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}"

Grid.ColumnSpan="6"

Grid.Column="2"

CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"

Visibility="Collapsed">

<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_UnFocus}"

BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"

Background="{StaticResource ControlSubItem_Background_UnFocus}"

CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}" />

</Border>

<Border x:Name="SelectionVisual"

BorderBrush="{StaticResource ControlSubItem_OuterBorder_Selected}"

BorderThickness="{StaticResource ControlSubItem_OuterBorderThickness}"

Grid.ColumnSpan="6"

Grid.Column="2"

CornerRadius="{StaticResource ControlSubItem_OuterCornerRadius}"

Visibility="Collapsed">

<Border BorderBrush="{StaticResource ControlSubItem_InnerBorder_Selected}"

BorderThickness="{StaticResource ControlSubItem_InnerBorderThickness}"

Background="{StaticResource ControlSubItem_Background_Selected}"

CornerRadius="{StaticResource ControlSubItem_InnerCornerRadius}" />

</Border>

<StackPanel x:Name="IndentContainer"

Orientation="Horizontal">

<Rectangle x:Name="IndentFirstVerticalLine"

Stroke="{StaticResource TreeView_LineColor}"

Visibility="Collapsed"

VerticalAlignment="Top"

Width="1">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,1,10000" />

</Rectangle.Clip>

</Rectangle>

</StackPanel>

<Grid x:Name="ListRootContainer"

Grid.Column="1"

HorizontalAlignment="Center"

MinWidth="20">

<Rectangle x:Name="HorizontalLine"

HorizontalAlignment="Right"

Height="1"

Stroke="{StaticResource TreeView_LineColor}"

VerticalAlignment="Center">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,10000,1" />

</Rectangle.Clip>

</Rectangle>

<Rectangle x:Name="VerticalLine"

HorizontalAlignment="Center"

Stroke="{StaticResource TreeView_LineColor}"

VerticalAlignment="Top"

Width="1">

<Rectangle.Clip>

<RectangleGeometry Rect="0,0,1,10000" />

</Rectangle.Clip>

</Rectangle>

<ToggleButton x:Name="Expander"

Background="{TemplateBinding Background}"

IsTabStop="False" />

<Grid x:Name="LoadingVisual"

HorizontalAlignment="Center"

RenderTransformOrigin="0.5,0.5"

Visibility="Collapsed"

VerticalAlignment="Center">

<Grid.RenderTransform>

<TransformGroup>

<RotateTransform x:Name="LoadingVisualAngleTransform"

Angle="0"

CenterY="0.5"

CenterX="0.5" />

</TransformGroup>

</Grid.RenderTransform>

<Path Data="M1,0 A1,1,90,1,1,0,-1"

Height="10"

StrokeStartLineCap="Round"

Stretch="Fill"

Stroke="{TemplateBinding Foreground}"

StrokeThickness="1"

Width="10" />

<Path Data="M0,-1.1 L0.1,-1 L0,-0.9"

Fill="{TemplateBinding Foreground}"

HorizontalAlignment="Left"

Height="4"

Margin="5,-1.5,0,0"

Stretch="Fill"

StrokeThickness="1"

VerticalAlignment="Top"

Width="4" />

</Grid>

<CheckBox x:Name="CheckBoxElement"

Grid.Column="2"

IsTabStop="False"

Margin="5,0,0,0"

telerik:StyleManager.Theme="{StaticResource Theme}"

Visibility="Collapsed"

VerticalAlignment="Center" />

<RadioButton x:Name="RadioButtonElement"

Grid.Column="2"

IsTabStop="False"

Margin="5,0,0,0"

telerik:StyleManager.Theme="{StaticResource Theme}"

Visibility="Collapsed"

VerticalAlignment="Center" />

<Image x:Name="Image"

Grid.Column="3"

HorizontalAlignment="Center"

MaxWidth="16"

MaxHeight="16"

Margin="2"

VerticalAlignment="Center" />

<Rectangle x:Name="FocusVisual"

Grid.ColumnSpan="6"

Grid.Column="2"

IsHitTestVisible="False"

RadiusY="3"

RadiusX="3"

Stroke="{StaticResource FocusBrushBlack}"

StrokeThickness="1"

StrokeDashArray="1 2"

Visibility="Collapsed" />

<Grid Grid.ColumnSpan="2"

Grid.Column="4">

<ContentPresenter x:Name="Header"

ContentTemplate="{TemplateBinding HeaderTemplate}"

Content="{TemplateBinding Header}"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

<ContentPresenter x:Name="EditHeaderElement"

HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

Margin="{TemplateBinding Padding}"

Visibility="Collapsed"

VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />

</Grid>

<ItemsPresenter x:Name="ItemsHost"

Grid.Row="1"

Visibility="Collapsed" />

</Grid>

</ControlTemplate>

<local:EODStatusFGConverter x:Key="EODStatusFGConverter"/>

<local:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>

<Style TargetType="telerik:RadTreeViewItem" x:Key="TreeViewItemStyle">

<Setter Property="IsExpanded" Value="True" />

<!--<Setter Property="BorderBrush" Value="{Binding RelativeSource={RelativeSource Self}, Path=Background}" />

<Setter Property="BorderThickness" Value="0" />-->

<Setter Property="Template" Value="{StaticResource TreeViewItemDefaultTemplate}" />

<!--<Setter Property="ItemsPanel">

<Setter.Value>

<ItemsPanelTemplate>

<StackPanel HorizontalAlignment="Center" Orientation="Horizontal" />

</ItemsPanelTemplate>

</Setter.Value>

</Setter>-->

</Style>

</UserControl.Resources>

<Grid x:Name="LayoutRoot" Background="{StaticResource BGBrush_1}">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<TextBlock Grid.Row="0" Text="{Binding CurrentTime}" Foreground="Red" FontSize="12" FontWeight="Bold" HorizontalAlignment="Right" VerticalAlignment="Center" Margin="0,0,10,0"/>

<Grid Grid.Row="1" Margin="10,0,-10,0">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Grid Grid.Row="1" Grid.Column="1">

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<TextBlock Grid.Row="0" Grid.Column="0" Text="EOD" FontWeight="Bold" Foreground="Orange" Margin="10" VerticalAlignment="Center"/>

<TextBlock Grid.Row="0" Grid.Column="0" Text="as of" FontWeight="Bold" Foreground="White" Margin="40,10,10,10" VerticalAlignment="Center"/>

<telerik:RadDatePicker Grid.Row="0" Grid.Column="1" Name="EODDatePicker" Background="{StaticResource BGBrush_1}" BorderBrush="{StaticResource BGBrush_1}" Foreground="{StaticResource ForegroundBrush}" Height="23" Width="100" Margin="10" SelectableDateEnd="{Binding MaxEODDate}" SelectedValue="{Binding EODDate, Mode=TwoWay}" SelectedDate="{Binding EODDate, Mode=TwoWay}"/>

<TextBlock Grid.Row="1" Grid.Column="0" Text="EOD Id" FontWeight="Bold" Foreground="White" Margin="10" VerticalAlignment="Center" Visibility="Collapsed"/>

<ComboBox Grid.Row="1" Grid.Column="1" Name="comboBox" Width="100" Height="23" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10" Style="{StaticResource MyComboBox}" ItemsSource="{Binding EODIdList}" SelectedItem="{Binding SelectedEodId, Mode=TwoWay}" Visibility="Collapsed" />

</Grid>

<telerik:RadTreeView Grid.Row="2" Name="RadTreeViewObj" VerticalAlignment="Center" Margin="50" Background="{StaticResource BGBrush_1}" BorderBrush="{StaticResource BGBrush_1}" ItemsSource="{Binding EODDataStepsCollection}" SelectionMode="Single" ItemContainerStyle="{StaticResource TreeViewItemStyle}" >

<telerik:RadTreeView.ItemTemplate>

<telerik:HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">

<Grid ShowGridLines="True" >

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<toolkit:BusyIndicator Grid.Column="0" BusyContent="Server requesting ..." IsBusy="{Binding IsRequested}" DisplayAfter="0" Padding="0" >

<!--<Button Padding="5" HorizontalAlignment="Left" VerticalAlignment="Center" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" IsEnabled="{Binding StepEnabled}" Command="{Binding ButtonStepCommand}">

<Button.Template>

<ControlTemplate>

<Grid >

<TextBlock Width="250" Text="{Binding Label}" FontWeight="Bold" Foreground="{Binding Status, Converter={StaticResource EODStatusFGConverter}}" />

</Grid>

</ControlTemplate>

</Button.Template>

</Button>-->

</toolkit:BusyIndicator>

<toolkit:BusyIndicator HorizontalAlignment="Right" Grid.Column="2" BusyContent="Server requesting ..." IsBusy="{Binding IsRequested}" DisplayAfter="0" Padding="0">

<Button Content="{Binding ButtonLabel}" VerticalAlignment="Center" Style="{StaticResource ButtonStyle_Blue}" Padding="5" Margin="10" HorizontalAlignment="Right" Visibility="{Binding IsVisible, Converter={StaticResource BooleanToVisibilityConverter}}" IsEnabled="{Binding StepEnabled}" Command="{Binding ButtonStepCommand}"/>

</toolkit:BusyIndicator>

</Grid>

</telerik:HierarchicalDataTemplate>

</telerik:RadTreeView.ItemTemplate>

</telerik:RadTreeView>

<Grid Grid.Row="4">

<Grid.ColumnDefinitions>

<ColumnDefinition Width="*"/>

<ColumnDefinition Width="Auto"/>

</Grid.ColumnDefinitions>

<Button Grid.Column="0" x:Name="CancelButton" Content="Cancel" FontWeight="Bold" Command="{Binding ButtonCancelCommand}" Height="23" HorizontalAlignment="Left" Margin="30,10,10,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>

<Button Grid.Column="1" x:Name="ValidateButton" Content="Validate" FontWeight="Bold" Command="{Binding ButtonValidateCommand}" Height="23" HorizontalAlignment="Right" Margin="10,10,30,10" Style="{StaticResource ButtonStyle_Blue}" VerticalAlignment="Bottom" Width="80" Visibility="{Binding IsValidateVisible, Converter={StaticResource BooleanToVisibilityConverter}}"/>

</Grid>

</UserControl>

Accepted

answered on 15 Sep 2014, 02:14 PM

Hello,

The buttons in the treeview's ItemTemplate are shifted right because each RadTreeViewItem has an indent based on its level. This indent moves the entire content of the item to right and all elements placed inside the template are moved. This is why the buttons are not aligned.

In order to align them you can use RelativeSource binding to get the RadTreeViewItem inside your ItemTemplate and set a Margin on the buttons so that they are aligned as you like. Here is an example in code:

<toolkit:BusyIndicator HorizontalAlignment="Right" Grid.Column="2" BusyContent="Server requesting ..." IsBusy="{Binding IsRequested}" DisplayAfter="0" Padding="0"

Margin=

"{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTreeViewItem}, Converter={StaticResource itemLevelToMarginConverter}}"

>

</toolkit:BusyIndicator>

public class ItemLevelToMarginConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

var item = (RadTreeViewItem)value;

var level = item.Level;

// Based on the level you can calculate the new Margin and return new Thickness() object.

// Here is an example:

// var newLeftMargin = GetMargin(level);

// return new Thickness(newLeftMargin, 0, 0, 0);

}

Please give this approach a try and let me know if it works for you or if you need any further assistance.

Regards,
Martin
Telerik

Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.

answered on 15 Sep 2014, 02:30 PM

Error 1 'SilverAM.Converters.ItemLevelToMarginConverter' does not implement interface member 'System.Windows.Data.IValueConverter.ConvertBack(object, System.Type, object, System.Globalization.CultureInfo)' On Line:

public class ItemLevelToMarginConverter : IValueConverter /In this line  ItemLevelToMarginConverter  is underlined by error

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

var item = (RadTreeViewItem)value;

var level = item.Level;

// Based on the level you can calculate the new Margin and return new Thickness() object.

// Here is an example:

// var newLeftMargin = GetMargin(level);

// return new Thickness(newLeftMargin, 0, 0, 0);

}

Error 2 The resource "ItemLevelToMarginConverter" could not be resolved. oN LINE:

<toolkit:BusyIndicator HorizontalAlignment="Right" Grid.Column="2" BusyContent="Server requesting ..." IsBusy="{Binding IsRequested}" DisplayAfter="0" Padding="0" Margin=

"{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTreeViewItem}, Converter={StaticResource ItemLevelToMarginConverter}}"

>

</toolkit:BusyIndicator>

answered on 15 Sep 2014, 02:47 PM

I solved the previous errors it was because i had not kept ConvertBack in my converter class but now the new problems are:

Error 2 The name 'GetMargin' does not exist in the current context

using System;

using System.Net;

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.Windows.Data;

using System.Globalization;

using Model;

using Telerik.Windows.Controls;

namespace SilverAM

{

public class ItemLevelToMarginConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

var item = (RadTreeViewItem)value;

var level = item.Level;

// Based on the level you can calculate the new Margin and return new Thickness() object.

// Here is an example:

var newLeftMargin = GetMargin(level);

return new Thickness(newLeftMargin, 0, 0, 0);

}

public Object ConvertBack(Object value, Type targetType, Object parameter, CultureInfo culture)

{

return null;

}

answered on 15 Sep 2014, 03:12 PM

pp.png

@Martin tHANKS FOR THE ANSWER I removed all the errors and my code is as follows :

using System;

using System.Net;

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.Windows.Data;

using System.Globalization;

using Model;

using Telerik.Windows.Controls;

using Telerik.Windows.Controls.RichTextBoxUI.Dialogs.FloatingBlockProperties;

namespace SilverAM

{

public class ItemLevelToMarginConverter : IValueConverter

{

public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)

{

var item = (RadTreeViewItem)value;

var level = item.Level;

var newLeftMargin = GetMargin(level);

return new Thickness(newLeftMargin, 0, 0, 0);

}

private double GetMargin(int level)

{

level = -55;

return level;

}

public Object ConvertBack(Object value, Type targetType, Object parameter, CultureInfo culture)

{

return null;

}

and xaml code is:

<telerik:RadTreeView Name="RadTreeViewObj" Grid.Column="0" VerticalAlignment="Center" Margin="50" Background="{StaticResource BGBrush_1}" BorderBrush="{StaticResource BGBrush_1}" ItemsSource="{Binding EODDataStepsCollection}" SelectionMode="Single" ItemContainerStyle="{StaticResource TreeViewItemStyle}">

<telerik:RadTreeView.ItemTemplate>

<telerik:HierarchicalDataTemplate ItemsSource="{Binding RelatedItems}">

<Grid ShowGridLines="True">

<Grid.RowDefinitions>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="Auto" />

</Grid.ColumnDefinitions>

<toolkit:BusyIndicator Grid.Column="0" BusyContent="Server requesting ..." IsBusy="{Binding IsRequested}" DisplayAfter="0" Padding="0">

</toolkit:BusyIndicator>

<toolkit:BusyIndicator HorizontalAlignment="Right" Grid.Column="2" BusyContent="Server requesting ..." IsBusy="{Binding IsRequested}" DisplayAfter="0" Padding="0" Margin=

"{Binding RelativeSource={RelativeSource AncestorType=telerik:RadTreeViewItem}, Converter={StaticResource ItemLevelToMarginConverter}}"

>

</toolkit:BusyIndicator>

</Grid>

</telerik:HierarchicalDataTemplate>

</telerik:RadTreeView.ItemTemplate>

</telerik:RadTreeView>

Ans the ouput is all the buttons shifts to left on manually setting to level = -55; whereas i just want the buttons inside the treeview to shift left so that they allign. I any solution for this problem ?
Please see the photo of GUI now.

Accepted

answered on 18 Sep 2014, 07:58 AM

TreeViewHeaderTemplateElementIndent.zip

Hello,

Note that the code snippets from my last reply was just a sample that was not completely implemented and its purpose was just to describe the approach. This is why some of the mentioned methods was missing.

However, I prepared a project that demonstrate the approach. Note that this implementation is merely a suggestion that is not well tested and I cannot guarantee that it will work in all possible case. I recommend you to test it properly and modify it if needed to fulfill your requirement. Please give the project a try and let me know if it helps.

Regards,
Martin
Telerik

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Why the data of second column shifted to right due to treview Child display

8 Answers, 1 is accepted