Changing RadPanelBarItem header position

9 posts, 1 answers
  1. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 08 Dec 2014 Link to this post

    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>
  2. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 10 Dec 2014 Link to this post

    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.

     
  3. UI for WPF is Visual Studio 2017 Ready
  4. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 11 Dec 2014 Link to this post

    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 
  5. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 11 Dec 2014 Link to this post

    Correction...wrong required layout was uploaded

    Attached is the required layout
  6. Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 15 Dec 2014 Link to this post

    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.

     
  7. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 15 Dec 2014 in reply to Pavel R. Pavlov Link to this post

    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
  8. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 16 Dec 2014 in reply to Ram Link to this post

    Any update on how to rotate the RadExpander arrow?

    Thanks
  9. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1182 posts

    Posted 17 Dec 2014 Link to this post

    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.

     
  10. Ram
    Ram avatar
    20 posts
    Member since:
    Nov 2014

    Posted 17 Dec 2014 Link to this post

    Thanks for confirming
Back to Top
UI for WPF is Visual Studio 2017 Ready