Vertical Alignment of RadPanelItem(s)

[Tobias]

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>

[Dinko | Tech Support Engineer]

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

[Tobias]

Hello Dinko,

thats exactly what I want, thanks a lot.

cheers!

Tobias

[Tobias]

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

[Dinko | Tech Support Engineer]

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

[Tobias]

Hi Dinko,

thanks for your quick response.

please change the MainWindow.xaml to the following:

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
        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

[Tobias]

Sorry, I mean "hit the enter button", not double-clicking.

[Tobias]

Hi Dinko,

can you help me with this issue?

regards,

Tobias

[Dinko | Tech Support Engineer]

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

[Tobias]

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

[Dinko | Tech Support Engineer]

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