DropDownContent closes every time

[Pov Ser]

I'm using DropDownButton in TabControl TabItem header with UserControl as DropDownContent.
When DropDown opens and i'm clicking on UserControl elements for example trying to resize OutlookBar or clicking other elements - DropDown always closes.
This problem does not show itself when using DropDownButton on clear Form as usual, but not when in TabItem header as Style.
Also i have Rotation problems. You can see that UserControl in upper ToggleButton is rotated like a crazy.

Here is Window xaml:

<Window
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="MainWindow"
    xmlns:me="clr-namespace:WpfApplication1"
    Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Style x:Key="ClosableStyle" TargetType="telerik:RadTabItem">
            <Setter Property="HeaderTemplate">
                <Setter.Value>
                    <DataTemplate>
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="*" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <TextBlock Text="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=Content, Mode=TwoWay}" Grid.Column="0"></TextBlock>

                            <telerik:RadDropDownButton Width="30" Height="30" x:Name="MachinesKnopka3" Margin="5,0,0,0" DropDownButtonPosition="Right" DropDownIndicatorVisibility="Visible" DropDownPlacement="Right" DropDownHeight="600" DropDownWidth="800" Grid.Column="1" Padding="0" ClickMode="Release" IsOpen="False">
                                <telerik:RadDropDownButton.LayoutTransform>
                                    <RotateTransform Angle="-90"/>
                                </telerik:RadDropDownButton.LayoutTransform>

                                <telerik:RadDropDownButton.DropDownContent>
                                    <me:UserControl1></me:UserControl1>

                                </telerik:RadDropDownButton.DropDownContent>
                            </telerik:RadDropDownButton>
                        </Grid>
                    </DataTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Window.Resources>
    <Grid>

        <telerik:RadTabControl ItemContainerStyle="{StaticResource ClosableStyle}" TabOrientation="Horizontal" TabStripPlacement="Left"   FlowDirection="LeftToRight" Align="Right"  Grid.Row="1" DropDownDisplayMode="Visible" telerik:StyleManager.Theme="Vista" AllowDragReorder="True">
            <telerik:RadTabControl.Background>
                <LinearGradientBrush EndPoint="0.504,1.5" StartPoint="0.504,0.03">
                    <GradientStop Color="#FFB7B7B7" Offset="0"/>
                    <GradientStop Color="#FFFFFFFF" Offset="0.567"/>
                </LinearGradientBrush>
            </telerik:RadTabControl.Background>

            <telerik:RadTabItem Header="Tab1"/>
            <telerik:RadTabItem Header="Tab2"/>
        </telerik:RadTabControl>



    </Grid>
</Window>

Here is UserControl:

<UserControl x:Class="UserControl1"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
             mc:Ignorable="d"
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Grid VerticalAlignment="Stretch" Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <telerik:RadOutlookBar HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0">
                <telerik:RadOutlookBarItem Header="Online Games">
                    <TextBlock>BattleField IV</TextBlock>
                </telerik:RadOutlookBarItem>
                <telerik:RadOutlookBarItem Header="Social Network">
                    <TextBlock>FaceBook</TextBlock>
                </telerik:RadOutlookBarItem>
            </telerik:RadOutlookBar>

            <TextBox  Grid.Column="1">Text1</TextBox>
        </Grid>
    </Grid>
</UserControl>

[Milena]

Hi Pov,

Thank you for the code snippet provided.

Let me get straight to your questions: 
1. You can set the KeepOpen property of the RadDropDownButton to "true", so the dropdown content will remain open until the user click again the button to close it. 

2. The issue with the TabStripPlacement is already logged in our feedback portal, where you can track its progress.Please have in mind that your vote is important for us. Based on the total amount of votes we will prioritise the items in our portal.

Also, I noticed that you are setting the Vista theme using our StyleManager.

<telerik:RadTabControl ItemContainerStyle="{StaticResource ClosableStyle}" TabOrientation="Horizontal" TabStripPlacement="Left"   FlowDirection="LeftToRight" Align="Right"  Grid.Row="1" DropDownDisplayMode="Visible" telerik:StyleManager.Theme="Vista" AllowDragReorder="True">...

Please note that we strongly suggest to use our Implicit Styles in combination with our NoXaml binaries. You can find more information on that matter in our Setting a Theme article.

I hope this information will help you and don't hesitate to write back if you have more questions.

Regards,
Milena
Telerik

 

 

[Pov Ser]

Setting KeepOpen to True is not a case. Then i will need to close somehow DropDown programmatically when focus was lost in my UserControl. Overall it is not critical but very conspicuous.

[Milena]

Hi Pov,

I noticed that the AllowDragReorder property of the RadTabControl is set to true. When you start a drag operation from the header as in your case, the reordering logic of the RadTabControl is activated and this is causing the closing of the dropdown content when you try to resize the RadOutlookBar. If you don't need to reorder the tab items, you can set the property to "false" and this will solve the problem. Otherwise, please write us back and we can think of some workaround.

I'm looking forward to your reply.

Regards,
Milena
Telerik

 

 

[Pov Ser]

Thanks. It Works.