Changing RadPanelBarItem header position

[Ram]

Hi,

Is there a way to show the RadPanelBarItem header to the right instead of left when Orientation="Horizontal". I have only 1 RadPanelBarItem and using it to create a search panel on the left that can be collapsed/expanded.

Thanks

            <telerik:RadPanelBar Grid.Column="0" VerticalAlignment="Stretch" Orientation="Horizontal">
                <telerik:RadPanelBarItem Header="Search" IsExpanded="True" HorizontalContentAlignment="Center">
                            <StackPanel Orientation="Horizontal">
                                <telerik:RadComboBox>
                                    <telerik:RadComboBoxItem Content="Item 1" IsSelected="True" />
                                </telerik:RadComboBox>
                            </StackPanel>
                </telerik:RadPanelBarItem>
            </telerik:RadPanelBar>

[Pavel R. Pavlov]

Hi Ram,

I used your snippet to create a project to investigate the reported layout and the result can be seen in the attached picture. As you have set the RadPanelBarItem.HorizontalContentAlignment to Center the text "Search" is centered. I cannot see any part of the RadPanelBarItem that is aligned to the right. This is why I would like to ask you to provide us with more information on your requirement. You can edit the image and send it over to help us understand.

On the other hand, if you are going to have only one RadPanelBarItem in your application you can consider using our RadExpander control instead the RadPanelBar. You do not need an ItemsControl with only one item when you can achieve the same layout with a content control.

I hope this information is helpful.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Ram]

Hello Pavel,

Thanks for your response.

We are going to have more than one RadPanelBarItem but in the sample snippet I have shown only one.

I have modified the image layout to show what we are looking to achieve (please see attached layout)

As suggested, I tried using RadExpander to check if the direction of the arrow on the header could be modified. But I was not able to implement even with FlowDirection="RightToLeft" on RadExpander and FlowDirection="LeftToRight" on the Content Grid. Try with WPF Expander control too but no luck.

<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<telerik:RadExpander Header="My Expander" ExpandDirection="Left" IsExpanded="True" telerik:StyleManager.Theme="Expression_Dark">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<ListBox Grid.Column="0">
<ListBoxItem Content="Option 1" />
<ListBoxItem Content="Option 2" />
<ListBoxItem Content="Option 3" />
<ListBoxItem Content="Option 4" />
<ListBoxItem Content="Option 5" />
</ListBox>
<ComboBox Width="100" Grid.Column="1">
<ComboBoxItem Content="Item 1" IsSelected="True" />
<ComboBoxItem Content="Item 1" />
</ComboBox>
</Grid>
</telerik:RadExpander>
</Grid>

Please advise.

Thanks 

[Ram]

Correction...wrong required layout was uploaded

Attached is the required layout

[Pavel R. Pavlov]

Hello Ram,

I see that you decided to use the RadExpander for your layout. With that control you can use its HeaderTemplate property and define your custom header. You can use a TextBlock and apply a LayoutTransform to it like this:

<telerik:RadExpander.HeaderTemplate>
    <DataTemplate>
        <TextBlock Text="Expander Header" HorizontalAlignment="Center">
            <TextBlock.LayoutTransform>
                <RotateTransform Angle="180"/>
            </TextBlock.LayoutTransform>
        </TextBlock>
    </DataTemplate>
</telerik:RadExpander.HeaderTemplate>

I hope this will get you started.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Ram]

May be I was not clear in describing the issue. I would like to rotate the arrow on the header template by 180 degree when expanded and 0 degree when it is collapsed. The reverse of what comes by default.

I tried creating a copy of the template and modified the Expanded VisualState using Microsoft Blend

<VisualStateGroup x:Name="ExpandStateGroup">
<VisualState x:Name="Expanded">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="0" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Collapsed">
<Storyboard>
<DoubleAnimation Duration="0:0:0.2" To="180" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="arrow"/>
</Storyboard>
</VisualState>
</VisualStateGroup>

This works. But I don't want to copy the complete Style and add to the resources. I am only interesing in modifying one VisualState. How can I apply this changed VisualState to the RadExpander and keeping everything as default (would like to override only the Expanded VisualState)

Thanks

[Ram]

Any update on how to rotate the RadExpander arrow?

Thanks

[Pavel R. Pavlov]

Hi Ram,

You are on the right way. You should extract and customize the default ControlTemplate of the control. There is no other way to customize the orientation of the arrow.

Regards,
Pavel R. Pavlov
Telerik

 

 

[Ram]

Thanks for confirming