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

Changing RadPanelBarItem header position

8 Answers 179 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Ram
Top achievements
Rank 1
Ram asked on 08 Dec 2014, 10:02 PM
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>

8 Answers, 1 is accepted

Sort by
0
Pavel R. Pavlov
Telerik team
answered on 10 Dec 2014, 12:21 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ram
Top achievements
Rank 1
answered on 11 Dec 2014, 02:41 PM
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 
0
Ram
Top achievements
Rank 1
answered on 11 Dec 2014, 02:45 PM
Correction...wrong required layout was uploaded

Attached is the required layout
0
Pavel R. Pavlov
Telerik team
answered on 15 Dec 2014, 03:19 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ram
Top achievements
Rank 1
answered on 15 Dec 2014, 08:21 PM
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
0
Ram
Top achievements
Rank 1
answered on 16 Dec 2014, 07:02 PM
Any update on how to rotate the RadExpander arrow?

Thanks
0
Accepted
Pavel R. Pavlov
Telerik team
answered on 17 Dec 2014, 12:20 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ram
Top achievements
Rank 1
answered on 17 Dec 2014, 02:26 PM
Thanks for confirming
Tags
PanelBar
Asked by
Ram
Top achievements
Rank 1
Answers by
Pavel R. Pavlov
Telerik team
Ram
Top achievements
Rank 1
Share this question
or