Aligning expand arrow to the left

5 posts, 1 answers
  1. Subash
    Subash avatar
    15 posts
    Member since:
    Dec 2012

    Posted 26 Dec 2012 Link to this post

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

    Posted 26 Dec 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  3. UI for WPF is Visual Studio 2017 Ready
  4. Subash
    Subash avatar
    15 posts
    Member since:
    Dec 2012

    Posted 26 Dec 2012 Link to this post

    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
  5. Answer
    Pavel R. Pavlov
    Admin
    Pavel R. Pavlov avatar
    1183 posts

    Posted 27 Dec 2012 Link to this post

    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

    Explore the entire Telerik portfolio by downloading Telerik DevCraft Ultimate.

  6. Vijay
    Vijay avatar
    29 posts
    Member since:
    Nov 2011

    Posted 30 Dec 2012 Link to this post

    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
Back to Top
UI for WPF is Visual Studio 2017 Ready