Progress® Telerik® UI for WPF Feedback Portal
Back to Feed
Request a Feature Report a Bug
Declined
Last Updated: 17 Jan 2020 15:25 by ADMIN
wu
Created on: 16 Oct 2019 02:41
Category: UI for WPF
Type: Bug Report
0
when use the RadTransitionControl for the RadTabControl, the radComboBox Multiple Selection will lost in the tabItem

when use the RadTransitionControl's SlideAndZoomTransition effect for the RadTabControl, the radComboBox Multiple Selection will lost in the  tabItem。

the  radComboBox data is from the mvvm binding,after change the tabitem,the Multiple Selection become single selection.

the RadTabControl's style is following:

           ...

           <ControlTemplate x:Key="TabControlTemplate" TargetType="telerik:RadTabControl">
        <Grid>
            <telerik:RadDockPanel LastChildFill="True">
                <telerik:LayoutTransformControl x:Name="HeaderDockedElement" telerik:RadDockPanel.Dock="Top">
                    <Grid SnapsToDevicePixels="True">
                        <Border x:Name="HeaderBackground" Background="{TemplateBinding HeaderBackground}" Visibility="{TemplateBinding BackgroundVisibility}"/>
                        <telerik:RadDockPanel Panel.ZIndex="10">
                            <telerik:LayoutTransformControl x:Name="AdditionalContentTransform" Margin="0" telerik1:RadDockPanel.Dock="Right">
                                <ContentPresenter x:Name="AdditionalContentElement" Content="{TemplateBinding AdditionalContent}"/>
                            </telerik:LayoutTransformControl>
                            <ToggleButton x:Name="DropDownButtonElement"
                                    Visibility="Collapsed"
                                    telerik:RadDockPanel.Dock="Right"
                                    Style="{TemplateBinding DropDownButtonStyle}"
                                    ClickMode="Press"
                                    IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                <telerik:RadContextMenu.ContextMenu>
                                    <telerikTabControl:DropDownMenu x:Name="DropDownMenuElement"
                                            StaysOpen="False"
                                            Placement="Bottom"
                                            Style="{TemplateBinding DropDownStyle}"
                                            ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}"
                                            ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}"
                                            DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}"/>
                                </telerik:RadContextMenu.ContextMenu>
                            </ToggleButton>
                            <RepeatButton x:Name="LeftScrollButtonElement" Style="{StaticResource ScrollButtonStyle}">
                                <telerik:RadGlyph Glyph="{StaticResource GlyphArrowChevronLeft}"/>
                            </RepeatButton>
                            <RepeatButton x:Name="RightScrollButtonElement" Style="{StaticResource ScrollButtonStyle}" telerik:RadDockPanel.Dock="Right">
                                <telerik:RadGlyph Glyph="{StaticResource GlyphArrowChevronRight}"/>
                            </RepeatButton>
                            <ScrollViewer x:Name="ScrollViewerElement"
                                    Style="{StaticResource EmptyScrollViewerStyle}"
                                    VerticalScrollBarVisibility="Disabled"
                                    BorderThickness="0"
                                    IsTabStop="False"
                                    HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility), RelativeSource={RelativeSource TemplatedParent}}">
                                <ItemsPresenter/>
                            </ScrollViewer>
                        </telerik:RadDockPanel>
                    </Grid>
                </telerik:LayoutTransformControl>
                <Border x:Name="ContentBorder"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Mode=TwoWay}"
                        Background="{TemplateBinding Background}"
                        Padding="{TemplateBinding Padding}">
                    <Grid>
                       
                        <telerik:RadTransitionControl x:Name="ContentElement"
                                            Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved,Converter={StaticResource InvertedBooleanToVisibilityConverter}}"
                                            Content="{TemplateBinding SelectedContent}"
                                            ContentTemplate="{TemplateBinding SelectedContentTemplate}"
                                            ContentTemplateSelector="{TemplateBinding SelectedContentTemplateSelector}"
                                            Duration="00:00:00.350">
                            <telerik:RadTransitionControl.Transition>
                                <local:TransitionSetFP>
                                    <local:TransitionSetFP.BackTransition>
                                        <telerik:SlideAndZoomTransition SlideDirection="LeftToRight" MinZoom="1" StartSlideAt="0.01" MinAlpha="1"/>
                                    </local:TransitionSetFP.BackTransition>
                                    <local:TransitionSetFP.ForwardTransition>
                                        <telerik:SlideAndZoomTransition SlideDirection="RightToLeft" MinZoom="1" StartSlideAt="0.01" MinAlpha="1"/>
                                    </local:TransitionSetFP.ForwardTransition>
                                </local:TransitionSetFP>
                            </telerik:RadTransitionControl.Transition>
                        </telerik:RadTransitionControl>
                        <Grid x:Name="ContentElementsPanel" Visibility="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=IsContentPreserved, Converter={StaticResource BooleanToVisibilityConverter}}"/>
                    </Grid>
                </Border>
            </telerik:RadDockPanel>
        </Grid>
        <ControlTemplate.Triggers>
            <Trigger Property="DropDownDisplayMode" Value="Visible">
                <Setter Property="Visibility" Value="Visible" TargetName="DropDownButtonElement"/>
            </Trigger>
            <MultiTrigger>
                <MultiTrigger.Conditions>
                    <Condition Property="DropDownDisplayMode" Value="WhenNeeded"/>
                    <Condition SourceName="ScrollViewerElement" Property="ComputedHorizontalScrollBarVisibility" Value="Visible"/>
                </MultiTrigger.Conditions>
                <Setter Property="Visibility" Value="Visible" TargetName="DropDownButtonElement"/>
            </MultiTrigger>
            <Trigger Property="TabStripPlacement" Value="Top">
                <Setter Property="BorderThickness" TargetName="ContentBorder" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessToOrientedThicknessConverter}, ConverterParameter=LeftBottomRight}"/>
            </Trigger>
            <Trigger Property="TabStripPlacement" Value="Left">
                <Setter TargetName="DropDownMenuElement" Property="HorizontalOffset" Value="0"/>
                <Setter TargetName="DropDownMenuElement" Property="VerticalOffset" Value="-3"/>
                <Setter Property="telerik:RadDockPanel.Dock" Value="Left" TargetName="HeaderDockedElement"/>
                <Setter Property="telerik:RadDockPanel.Dock" Value="Left" TargetName="AdditionalContentTransform"/>
                <Setter Property="telerik:RadDockPanel.Dock" Value="Left" TargetName="DropDownButtonElement"/>
                <Setter Property="LayoutTransform" TargetName="HeaderDockedElement">
                    <Setter.Value>
                        <RotateTransform Angle="-90"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="BorderThickness" TargetName="ContentBorder" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessToOrientedThicknessConverter}, ConverterParameter=TopRightBottom}"/>
            </Trigger>
            <Trigger Property="TabStripPlacement" Value="Right">
                <Setter TargetName="DropDownMenuElement" Property="HorizontalOffset" Value="0"/>
                <Setter TargetName="DropDownMenuElement" Property="VerticalOffset" Value="3"/>
                <Setter Property="LayoutTransform" TargetName="HeaderDockedElement">
                    <Setter.Value>
                        <RotateTransform Angle="90"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="BorderThickness" TargetName="ContentBorder" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessToOrientedThicknessConverter}, ConverterParameter=TopLeftBottom}"/>
            </Trigger>
            <Trigger Property="TabStripPlacement" Value="Bottom">
                <Setter TargetName="DropDownMenuElement" Property="HorizontalOffset" Value="3"/>
                <Setter Property="telerik:RadDockPanel.Dock" Value="Left" TargetName="AdditionalContentTransform"/>
                <Setter Property="telerik:RadDockPanel.Dock" Value="Left" TargetName="DropDownButtonElement"/>
                <Setter Property="LayoutTransform" TargetName="HeaderDockedElement">
                    <Setter.Value>
                        <RotateTransform Angle="180"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="LayoutTransform" TargetName="AdditionalContentTransform">
                    <Setter.Value>
                        <RotateTransform Angle="180"/>
                    </Setter.Value>
                </Setter>
                <Setter Property="BorderThickness" TargetName="ContentBorder" Value="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=BorderThickness, Converter={StaticResource ThicknessToOrientedThicknessConverter}, ConverterParameter=TopRightLeft}"/>
            </Trigger>
        </ControlTemplate.Triggers>
    </ControlTemplate>
    <Style TargetType="telerik:RadTabControl">
        <Setter Property="mat:MaterialAssist.ShadowDepth" Value="Depth1"/>
        <Setter Property="TextOptions.TextRenderingMode" Value="ClearType"/>
        <Setter Property="BorderBrush" Value="{telerik1:FluentResource ResourceKey=BasicBrush}"/>
        <Setter Property="HeaderBackground" Value="{telerik1:FluentResource ResourceKey=MainBrush}"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="Background" Value="{telerik1:FluentResource ResourceKey=PrimaryBackgroundBrush}"/>
        <Setter Property="MinWidth" Value="5"/>
        <Setter Property="MinHeight" Value="20"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="FontFamily" Value="{telerik1:FluentResource ResourceKey=FontFamily}"/>
        <Setter Property="FontSize" Value="{telerik1:FluentResource ResourceKey=FontSize}"/>
        <Setter Property="Foreground" Value="{telerik1:FluentResource ResourceKey=MarkerBrush}"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Primitives:TabWrapPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="DropDownButtonStyle" Value="{StaticResource DropDownButtonStyle}"/>
        <Setter Property="DropDownStyle" Value="{StaticResource DropDownMenuStyle}"/>
        <Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
        <Setter Property="Template" Value="{StaticResource TabControlTemplate}"/>
    </Style>
 

 

1 comment
ADMIN
Dimitar Dinev
Posted on: 22 Oct 2019 15:41

Hi Wu,

Thank you for the code snippet.

First, I guess you mean the selection is lost when switching tabs, not the SelectionMode changed from Multiple to Single, please let me know if I am wrong. The reason for the RadComboBox to lose its selection is because when switching tabs, the Content of the unselected tab is unloaded from visual tree and the newly selected tab's Content is loaded in the visual tree by your TransitionControl. When the combobox' tab is reloaded again, its visual state (including the state of the combobox items) is lost which is expected.

The IsContentPreserved property of the RadTabControl will save the current state of the UI. Its default value is false. What the property does is that it changes the visibility of each view without unloading it from the VisualTree but keeping it in a separate ContentPresenter. However, if IsContentPreserved is true, your TransitionControl won't be visible. A possible way to keep the TransitionControl and preserving the selection in the ComboBox is to keep the selection in sync with ViewModels. You can find this implemented in the attached project where IsSelected property of the RadComboBox is bound to property from the ViewModel. Let me know if fits well in your scenario.

Regards,
Dimitar Dinev
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.
Attached Files:
Create an account Log In
View
Type
Status
Category