Aligning expand arrow to the left

[Subash]

Hi,

I am new to this telerik controls. I want to align the expand arrow to the left corner of the bar. currently it is in the right corner. How can i acheive it.

Thanks,
Subash

[Pavel R. Pavlov]

Hi Subash,

Basically such customization require changing the default template of the control.  An article guiding you through the correct steps can be found here. However, in order to replace the button you will have to specify a spot to place it. Take a look at this article and please elaborate on where you want that button to be visualized. Before the Header of the RadPanelBarItem or after it? 

For your convenience I have extracted the default template of the RadPanelBarItem and I moved the Expand/Collapse Arrow before the Header of the item. If you take a closer look at the Grid called HeaderRow you will notice that there are defined five columns where the arrow and the header are placed. I have changed the column of the Path called arrow to 0 so it renders in the first column. Also I changed the Margin property of the ContentControl called Header to:

Margin="20 0 0 0"

before the change it was like this

Margin="{TemplateBinding Padding}"

Please take a look at the attached project and let me know if it fits your needs.

Regards,
Pavel R. Pavlov
the Telerik team

[Subash]

Hi Pavel,

Thanks for your reply. The style which you have applied in the sample code, I applied the same. But now i am getting the header text getting overlapped over the arrow. I want the arrow to be first, after that only i need the header content. i have attached the picture, currently how i am getting it now. How can i achieve this?

Thanks
Subash

[Pavel R. Pavlov]

Hello Subash,

Please excuse me for not making myself clear. I have noticed this behavior.. You can overcome it by adding some Margins to the Path called arrow or moving the ContentControl called Header to the second column. I suggest you use the second approach because using the Grid control will make the resizing logic better that using fixed Margins. In order to implement it you can use the following snippets:

<ContentControl x:Name="Header"
    Grid.Column="1"
    Grid.ColumnSpan="4"
    Margin="{TemplateBinding Padding}"
    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
    ContentTemplate="{TemplateBinding HeaderTemplate}"
    FontSize="{TemplateBinding FontSize}"
    Foreground="{TemplateBinding Foreground}" />

<Path x:Name="arrow"
      Grid.Column="0"
      Margin="7 0"
      HorizontalAlignment="Right"
      VerticalAlignment="Center"
      Data="M1,1.5L4.5,5 8,1.5"
      Opacity="1"
      RenderTransformOrigin="0.5,0.5"
      Stretch="None"
      Stroke="Black"
      StrokeThickness="2">
    <Path.RenderTransform>
        <RotateTransform x:Name="directionRotation" Angle="0" />
    </Path.RenderTransform>
</Path>

Please give it a try and let me know if this approach works for you.

Regards,
Pavel R. Pavlov
the Telerik team

[Vijay]

Hi Subash

Please find the below sample code, hope this helps.

<telerik:RadPanelBar ID="RadPanelBar1" runat="server" Skin="Outlook" OnItemClick="ItemClick">
 <Items>
   <telerik:RadPanelItem runat="server" Text="Mail">
     <Items>
       <telerik:RadPanelItem runat="server" Text="InBox" />
       <telerik:RadPanelItem runat="server" Text="Deleted Items" />
       <telerik:RadPanelItem runat="server" Text="Sent Items" />
     </Items>
  </telerik:RadPanelItem>
  <telerik:RadPanelItem runat="server" Text="Calendar">
     <Items>
       <telerik:RadPanelItem runat="server">
         <ItemTemplate>
           <telerik:RadCalendar ID="RadCalendar1" runat="server" Skin="Outlook" />
         </ItemTemplate>
       </telerik:RadPanelItem>
     </Items>
  </telerik:RadPanelItem>
  <telerik:RadPanelItem runat="server" Text="Notes">
     <Items>
        <telerik:RadPanelItem runat="server" Text="Item1" />
        <telerik:RadPanelItem runat="server" Text="Item2" />
        <telerik:RadPanelItem runat="server" IsSeparator="True" Text="<hr>" />
        <telerik:RadPanelItem runat="server" Text="Item3">
           <Items>
              <telerik:RadPanelItem runat="server" Text="ItemA" />
              <telerik:RadPanelItem runat="server" Text="ItemB" />
           </Items>
        </telerik:RadPanelItem>
      </Items>
   </telerik:RadPanelItem>
 </Items>

protected void ItemClick(object sender, RadPanelBarEventArgs e)
 {
     foreach(RadPanelItem radItemObj in this.RadPanelBar1.Items)
     {
         if(radItemObj!=e.Item)
         {
             radItemObj.Expanded = false;
         }
         else
         {
             radItemObj.Expanded = true;
         }
     }

Thanks,
Vijay