RadTreeView: HorizonalContentAlignment doesn't work

[Yan Moura]

Hi,

I am very frustrated as I am not being able to do simple tasks as align my RadTreeView contents.
I would like to force the Header to align both in left and right sides (justified), but am not getting success with that.

Basically here is my code:

TreeViewItem myitem = new TreeViewItem();
myitem.Header = lChoices[z].Application + ' - ' + lChoices[z].Hollnumber;
myitem.Background = new SolidColorBrush(Colors.Orange);

// the following line doesn't work - actually no matter what alignment I use, nothing changes
myitem.HorizontalContentAlignment = System.Windows.HorizontalAlignment.Stretch;

mytreeview.Items.Add(myitem);

Actually doesn't matter what horizontal alignment I choose, it always keep aligned at left.

Any idea?

Thanks!

[Petar Mladenov]

Hello Yan Moura,

I tried this code which works as expected at our side:

<telerik:RadTreeView>
           <telerik:RadTreeViewItem Header="ALABALA" HorizontalContentAlignment="Right" />
           <telerik:RadTreeViewItem Header="ALABALA" HorizontalContentAlignment="Left" />
           <telerik:RadTreeViewItem Header="ALABALA" HorizontalContentAlignment="Center" />
       </telerik:RadTreeView>

I guess the problem is that you add a System.Windows.Controls.TreeViewItems in a RadTreeView which is not supported scenario. Please replace them with Telerik.Windows.Controls.RadTreeViewItems and let us know if this helps.


Best wishes,
Petar Mladenov
the Telerik team

[Yan Moura]

Hi Petar,

Thanks for putting a light on it.

I tried your sample and it worked fine. Now, I have an extra question still in the same subject.
Doesn't it suppose to be able to JUSTIFY text (both left and right forced alignment) when using 'Stretch' style?

Look what I have tried:

<telerik:RadTreeViewItem Header="ALABALA" HorizontalContentAlignment="Stretch"/>

It simply aligns my text to left. Actually I am in the search for a way to align my header text left AND right (justified) by request of my boss!

Could you point me any clue? Is this possible directly in the RadTreeView control? There is any workaround?

Thanks a lot!

Yan

[Petar Mladenov]

Hi Yan Moura,

You can place a TextBlock inside a ViewBox like so:

<telerik:RadTreeViewItem >
               <telerik:RadTreeViewItem.Header>
                   <Viewbox Width="500" Height="24" HorizontalAlignment="Stretch"  Stretch="Fill">
                       <TextBlock Text="Text To Test Stretching" />
                   </Viewbox>
               </telerik:RadTreeViewItem.Header>
           </telerik:RadTreeViewItem>

Please let us know if this could fit in your scenario.

Regards,
Petar Mladenov
the Telerik team

[Yan Moura]

Hi Petar,

Yes, your sample helped a LOT! Although I am doing it in the C# code behind and not directly in the XAML page, it was an excellent direction and I finally made it work. The hardest part was because I am an experienced coder but at the same time very fresh in SL that are being requested to step in this new ground doing complex stuff. Since I wasn't sure if SL controls (even native as well Telerik ones) could be nested and since I couldn't find any documentation in Google speaking specifically about this subject (believe me, I really searched!) I was practically convinced that I wouldn't be able to do that. Thanks to your help, I am on track again! :)

Thanks a lot!

Yan

[Petar Mladenov]

Hello Yan Moura,

Actually ViewBox is more often used for 2D Graphics instead of ordinary SL controls.
Instead, you can also use s ScaleTransform to scale the TextBlock like so:

<telerik:RadTreeView>
           <telerik:RadTreeViewItem>
               <telerik:RadTreeViewItem.Header>
                   <TextBlock Text="Sample text to Expand">
                       <TextBlock.RenderTransform>
                           <ScaleTransform ScaleX="2" />
                       </TextBlock.RenderTransform>
                   </TextBlock>
               </telerik:RadTreeViewItem.Header>
           </telerik:RadTreeViewItem>
       </telerik:RadTreeView>

Kind regards,
Petar Mladenov
the Telerik team

[saw]

Hi,

Can i edit tree view items using proposed method ?
and can i use other events in tree view (Selected, Edited, SelectionChanged, SelectedItem) ?

[Petar Mladenov]

Hi Shalin,

When you edit items, ItemEditTemplate (default one or your custom one) is being applied and it replaces the Header object. Basically, there should be no issues with the mentioned approach. Same is true for the mentioned  events - SelectionChanged, Edited, etc. Please let us know if you experience any specific difficulties.

Regards,
Petar Mladenov
Telerik

 

 

[saw]

Hi,
Thank you vary much for the quick reply. But using previously mentioned approach and below approach nothing happens. Items in tree can not move to left most side. (Streth and Left both use)

<telerik:RadTreeView>

<telerik:RadTreeView.ItemContainerStyle>

                            <Style TargetType="telerik:RadTreeViewItem">

                                <Setter Property="HorizontalContentAlignment" Value="Stretch"/>

                            </Style>

                        </telerik:RadTreeView.ItemContainerStyle>

                        <telerik:RadTreeView.Items>

                            <Style TargetType="telerik:RadTreeViewItem">

                                <Setter Property="HorizontalContentAlignment" Value="Left"/>

                            </Style>

                        </telerik:RadTreeView.Items>

</telerik:RadTreeView>



[Petar Mladenov]

Hi Shalin,

Could you please try setting HorizontalAlignment = Left on the RadTreeView and let us know if this is what you need to achieve. Below you can see captured picture of how the items align left with this setting.

Regards,
Petar Mladenov
Telerik

 

 

[saw]

i want to align items in tree into left most side of the tree. here is the code

<navi:RadTreeView x:Name="rdtreeTags" SelectedItem="{Binding Tags_CustmFldDetails.SelectedTag, Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"

                    IsEditable="True" HorizontalContentAlignment="Stretch"

                    ItemsSource="{Binding Tags_CustmFldDetails.TagsList, Mode=TwoWay}"

                     SelectionChanged="rdtreeTags_SelectionChanged"  DisplayMemberPath="TagName" Selected="rdtreeTags_Selected"

                    SelectionMode="Single" Edited="rdtreeTags_Edited" EditStarted="rdtreeTags_EditStarted" Margin="77,10,241.433,658" BorderThickness="1" BorderBrush="Green">

                        <telerik:RadTreeView.ItemContainerStyle>

                            <Style TargetType="telerik:RadTreeViewItem">

                                <Setter Property="HorizontalAlignment"  Value="Left"/>

                            </Style>

                        </telerik:RadTreeView.ItemContainerStyle>

                        <telerik:RadTreeView.Items>

                            <Style TargetType="telerik:RadTreeViewItem">

                                <Setter Property="HorizontalContentAlignment" Value="Left"/>

                            </Style>

                        </telerik:RadTreeView.Items>

                         

                    </navi:RadTreeView>

And i also add screen shot,

[Petar Mladenov]

Hello Saw,

Could you please confirm you want to remove the space on the left of every RadTreeViewItem ? Basically this space is for the toggle button which appears if the item has child items. In order to remove this space you need to edit the default ControlTemplate of the RadTreeViewItem.
On a side note, there are fe mistakes in your code snippet. You use both Items and ItemsSource property of the RadTreeView which won't work. You must use either Items (declarative population) or ItemsSource (databinding approach). Also, you cannot place Style in the ItemsCollection.

Regards,
Petar Mladenov
Telerik

 

 

[saw]

Thank you very much for the info. but I added this Items for just testing. Could you please give me a quick tip on edit tree default controller template for remove toggle button ? I don't have any child items.

[Petar Mladenov]

Hi Saw,

Attached you can find an example with the extracted template of the RadTreeViewItem. Below you can find the difference I introduced:

<Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="0" Width="0">

Orginally this Grid is:

<Grid x:Name="ListRootContainer" Grid.Column="1" HorizontalAlignment="Center" MinWidth="21" >

Let us know if this is what you needed.

Furthermore, if you aim to use a flat (non hierarchical RadTreeView) you can consider using our RadListBox. It's virtualization is faster than the RadTreeView's one.

Regards,
Petar Mladenov
Telerik