Vertical Alignment of RadPanelItem(s)

11 posts, 0 answers
  1. Tobias
    Tobias avatar
    13 posts
    Member since:
    Jul 2018

    Posted 31 Jul 2018 Link to this post

    Hello,

    is it possible to set different VerticalAlignment-Properties for RadPanelItems in a RadPanelBar?

    I want to vertical align the first item to top (fixed height) and then the second item to stretch with the User Control.

     

    I tried this solution, but it won't work:

    <telerik:RadPanelBar ExpandMode="Multiple" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
        <telerik:RadPanelBarItem Header="Liveliste" IsExpanded="True" VerticalAlignment="Top">
         <views:StationsLiveView />
               </telerik:RadPanelBarItem>
               <telerik:RadPanelBarItem Header="Teilnehmerliste" IsExpanded="True" VerticalAlignment="Stretch">
                   <views:StationsUserView />
               </telerik:RadPanelBarItem>
           </telerik:RadPanelBar>
  2. Dinko
    Admin
    Dinko avatar
    1164 posts

    Posted 02 Aug 2018 Link to this post

    Hello Tobias,

    The RadPanelBar measures itself with infinity and so is true for the RadPanelBarItems and the control used internally in the PanelBarItems - PanelBarPanel. What you could try is to set custom panel for the ItemsPanel of the RadPanelBar. In your case, you can set DockPanel and set the DockPanel.Dock attached property to all panelbar items except the last one which you want to take all the space.
    <Window.Resources>
        <Style  TargetType="telerik:RadPanelBar" >         
            <Setter Property="ItemsPanel">
                <Setter.Value>
                    <ItemsPanelTemplate>
                        <DockPanel  />
                    </ItemsPanelTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid Background="Red">
        <telerik:RadPanelBar ExpandMode="Multiple" ScrollViewer.VerticalScrollBarVisibility="Disabled" >           
            <telerik:RadPanelBarItem Header="Liveliste" IsExpanded="True"  DockPanel.Dock="Top" >
                <local:StationsLiveView />
            </telerik:RadPanelBarItem>           
            <telerik:RadPanelBarItem Header="Teilnehmerliste" IsExpanded="True" DockPanel.Dock="Top"  >
                <local:StationsLiveView />
            </telerik:RadPanelBarItem>
            <telerik:RadPanelBarItem Header="Teilnehmerliste" IsExpanded="True"  >
                <local:StationsLiveView />
            </telerik:RadPanelBarItem>
        </telerik:RadPanelBar>
    </Grid>

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Tobias
    Tobias avatar
    13 posts
    Member since:
    Jul 2018

    Posted 03 Aug 2018 in reply to Dinko Link to this post

    Hello Dinko,

    thats exactly what I want, thanks a lot.

    cheers!

    Tobias

  4. Tobias
    Tobias avatar
    13 posts
    Member since:
    Jul 2018

    Posted 03 Aug 2018 Link to this post

    Hello Dinko,

    one strange behaviour is left: when I select the last RadPanelBarItem and hit enter, the control seems to lost his stretch alignment and resizes to its minimum. Can you explain this?

    regards,

    Tobias

  5. Dinko
    Admin
    Dinko avatar
    1164 posts

    Posted 03 Aug 2018 Link to this post

    Hi Tobias,

    I wasn't able to reproduce the behavior explained in your last post. I am attaching the sample project which I used to test your scenario. Can you give it a try and let me know what I am missing?

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Tobias
    Tobias avatar
    13 posts
    Member since:
    Jul 2018

    Posted 03 Aug 2018 in reply to Dinko Link to this post

    Hi Dinko,

    thanks for your quick response.

    please change the MainWindow.xaml to the following:

    <Window x:Class="WpfApplication1.MainWindow"
            xmlns:local="clr-namespace:WpfApplication1"
            mc:Ignorable="d"
            Title="MainWindow" Height="350" Width="525">
        <Window.Resources>
            <Style  TargetType="telerik:RadPanelBar" >         
                <Setter Property="ItemsPanel">
                    <Setter.Value>
                        <ItemsPanelTemplate>
                            <DockPanel  />
                        </ItemsPanelTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Window.Resources>
        <Grid Background="Red">
            <telerik:RadPanelBar ExpandMode="Multiple" ScrollViewer.VerticalScrollBarVisibility="Disabled" >           
                <telerik:RadPanelBarItem Header="Liveliste" IsExpanded="True"  DockPanel.Dock="Top" >
                    <local:StationsLiveView />
                </telerik:RadPanelBarItem>           
                <!-- Issue occurred when double-clicking on next Panel -->
                <telerik:RadPanelBarItem Header="Teilnehmerliste" IsExpanded="True"  >
                    <ListBox></ListBox>
                </telerik:RadPanelBarItem>
            </telerik:RadPanelBar>
        </Grid>
    </Window>

     

    regards,

    Tobias

  7. Tobias
    Tobias avatar
    13 posts
    Member since:
    Jul 2018

    Posted 03 Aug 2018 in reply to Tobias Link to this post

    Sorry, I mean "hit the enter button", not double-clicking.
  8. Tobias
    Tobias avatar
    13 posts
    Member since:
    Jul 2018

    Posted 07 Aug 2018 Link to this post

    Hi Dinko,

    can you help me with this issue?

    regards,

    Tobias

  9. Dinko
    Admin
    Dinko avatar
    1164 posts

    Posted 07 Aug 2018 Link to this post

    Hello Tobias,

    Thank you for the provided code snippet. Please, excuse me for the late response.

    This is known behavior and it is already logged in our Feedback Portal where you can track its progress. You can try the workaround suggested in the portal. Give it a try and let me know how it goes on your side.

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  10. Tobias
    Tobias avatar
    13 posts
    Member since:
    Jul 2018

    Posted 08 Aug 2018 in reply to Dinko Link to this post

    Hi Dinko,

    thanks for your response.

    Unfortunately this isn't working for me. I need the KeyDown-Event in the RadPanelItem-Content.

    Any chance that this will become a real fix in future release?

    regards,

    Tobias

  11. Dinko
    Admin
    Dinko avatar
    1164 posts

    Posted 09 Aug 2018 Link to this post

    Hello Tobias,

    For the moment of writing, we can not bind to any specific time frame for fixing this issue. You can follow the public item in our portal so you can receive notifications for its status changed.

    Regards,
    Dinko
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top