horizontal splitter problem inoutlook bar

[Syed Asif]

i upgrated  outlook bar control silverlight 4 to silverlight 5 ,but in silverlight4  horizontal splitter working fine but same code it not working in silverlight5

[Hristo]

Hello Syed,

Could you please send us a sample project so we could investigate the issue in more details. This would be the best way to assist you with the issue. Also, could you please tell us which are the old and new DLLs versions.

I have changed the thread type to general feedback so you could be able to attach zip files directly in it.

I am looking forward to hearing from you.

Regards,
Hristo
Telerik

[Bhami]

hai Hristo,

We are facing a problem while using RadOutlookbar in silverlight 5.

After dragging the Horizontal splitter and leaving it, the position of the items are changing but they are coming back to normal position immediately. Can you please help us in making the items stick to their changed position?

I am pasting here the style and sample xaml to let you know how we actually used RadOutlookbar and we added items and events to the Outlookbar in code behind. We are happy to share you the code behind as well if in case you need to see it.

Style and Usage (XAML):

<!-- Styles -->
 <SolidColorBrush x:Key="RadOutlookBar_ForegroundHeader" Color="#FF000000"/>
    <SolidColorBrush x:Key="RadOutlookBar_HeaderBackground" Color="#00EDE6FF"/>
    <SolidColorBrush x:Key="RadOutlookBar_HeaderOuterBorder" Color="#009098A3"/>
    <LinearGradientBrush x:Key="RadOutlookBar_BackgroundItem" EndPoint="1,0.997" StartPoint="1,-0.259">
        <GradientStop Offset="1" Color="Transparent"/>
        <GradientStop Color="#7DFFFFFF" Offset="0.521"/>
        <GradientStop Color="#2EFFFFFF"/>
        <GradientStop Color="#4BD7D7D7" Offset="0.525"/>
    </LinearGradientBrush>
    <SolidColorBrush x:Key="RadOutlookBar_OuterItemBorderBrush" Color="#FF252525"/>
    <Thickness x:Key="RadOutlookBar_OuterBorderThickness">0 1 0 0</Thickness>
    <SolidColorBrush x:Key="RadOutlookBar_InnerItemBorderBrush" Color="#3FFEFEFE"/>
    <Thickness x:Key="RadOutlookBar_InnerBorderThickness">1</Thickness>
    <LinearGradientBrush x:Key="RadOutlookBar_ButtonCheckedBackgroud" EndPoint="0 1" StartPoint="0 0">
        <GradientStop Color="Transparent" Offset="0"/>
        <GradientStop Color="#B4FFFFFF" Offset="0.616"/>
        <GradientStop Color="#6DFFFFFF" Offset="0.312"/>
        <GradientStop Color="White" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="RadOutlookBar_ButtonOverBackgroud" EndPoint="0 1" StartPoint="0 0">
        <GradientStop Color="#C0FFFFFF" Offset="0"/>
        <GradientStop Color="#41FFFFFF" Offset="0.304"/>
        <GradientStop Color="#4CFFFFFF" Offset="0.604"/>
        <GradientStop Color="Transparent" Offset="1"/>
    </LinearGradientBrush>
    <LinearGradientBrush x:Key="RadOutlookBar_ButtonPressedBackgroud" EndPoint="0 1" StartPoint="0 0">
        <GradientStop Color="#B5FFFFFF" Offset="0"/>
        <GradientStop Color="#BFFFFFFF" Offset="0.692"/>
        <GradientStop Color="#B7FFFFFF" Offset="0.356"/>
        <GradientStop Color="#C5FFFFFF" Offset="1"/>
    </LinearGradientBrush>
    <Style x:Key="OutlookFooterToggleButton" TargetType="ToggleButton">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Border x:Name="ControlBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStates">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="MouseOverElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Pressed">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedElement" Storyboard.TargetProperty="Visibility">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="CheckStates">
                                <VisualState x:Name="Checked">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ControlBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadOutlookBar_ButtonCheckedBackgroud}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unchecked"/>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Grid>
                            <Rectangle x:Name="MouseOverElement" Fill="{StaticResource RadOutlookBar_ButtonOverBackgroud}" IsHitTestVisible="False" Visibility="Collapsed"/>
                            <Rectangle x:Name="PressedElement" Fill="{StaticResource RadOutlookBar_ButtonPressedBackgroud}" IsHitTestVisible="False" Visibility="Collapsed"/>
                            <ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Grid>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Padding" Value="0"/>
        <Setter Property="BorderThickness" Value="0"/>
        <Setter Property="Background" Value="Transparent"/>
    </Style>
    <SolidColorBrush x:Key="RadOutlookBar_PathFill" Color="#000000"/>
    <SolidColorBrush x:Key="RadOutlookBar_BorderBrush" Color="#009098a3"/>
    <RadialGradientBrush x:Key="RadOutlookBar_HorizontalSplitterBackground" RadiusX="0.6" RadiusY="0.909999" Center="0.504274,1.00002" GradientOrigin="0.504274,1.00002" >
        <GradientStop Color="Transparent" Offset="1"/>
        <GradientStop Color="White" Offset="0"/>
    </RadialGradientBrush>
    <Style x:Key="OutlookBarHorizontalSplitter" TargetType="Thumb">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="Thumb">
                    <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}">
                        <StackPanel HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Orientation="Horizontal">
                            <Rectangle Fill="{TemplateBinding BorderBrush}" Height="3" Margin="1" Width="3"/>
                            <Rectangle Fill="{TemplateBinding BorderBrush}" Height="3" Margin="1" Width="3"/>
                            <Rectangle Fill="{TemplateBinding BorderBrush}" Height="3" Margin="1" Width="3"/>
                            <Rectangle Fill="{TemplateBinding BorderBrush}" Height="3" Margin="1" Width="3"/>
                        </StackPanel>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="{StaticResource RadOutlookBar_BorderBrush}"/>
        <Setter Property="BorderThickness" Value="0 1 0 0"/>
        <Setter Property="Background" Value="{StaticResource RadOutlookBar_HorizontalSplitterBackground}"/>
        <Setter Property="HorizontalContentAlignment" Value="Center"/>
        <Setter Property="VerticalContentAlignment" Value="Center"/>
        <Setter Property="Padding" Value="0 2 0 2"/>
        <Setter Property="Cursor" Value="SizeNS"/>
    </Style>
    <Style x:Key="RadOutlookBarStyle1" TargetType="telerikNavigation:RadOutlookBar">
        <Setter Property="TitleTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <ContentControl HorizontalAlignment="{TemplateBinding HorizontalAlignment}" FontSize="15" Foreground="{StaticResource RadOutlookBar_ForegroundHeader}" IsTabStop="False" Content="{Binding}"/>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikNavigation:RadOutlookBar">
                    <Grid x:Name="LayoutRoot">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="DropDownDisplayStates">
                                <VisualState x:Name="DropDownButtonVisible">
                                    <Storyboard/>
                                </VisualState>
                                <VisualState x:Name="DropDownButtonCollapsed">
                                    <Storyboard/>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="RootElement" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <telerik:RadDockPanel>
                                <Border Margin="0,0,0,0" Visibility="{TemplateBinding HeaderVisibility}" Background="{StaticResource RadOutlookBar_HeaderBackground}" BorderBrush="{StaticResource RadOutlookBar_HeaderOuterBorder}" BorderThickness="1" telerik:RadDockPanel.Dock="Top">
                                    <ContentControl x:Name="TitleElement" Margin="5 3 5 3" HorizontalContentAlignment="Stretch" IsTabStop="False" VerticalContentAlignment="Stretch" ContentTemplate="{TemplateBinding TitleTemplate}"/>
                                </Border>
                                <Border MinHeight="{TemplateBinding MinimizedAreaMinHeight}" Visibility="{TemplateBinding MinimizedAreaVisibility}" Background="{StaticResource RadOutlookBar_BackgroundItem}" BorderBrush="{StaticResource RadOutlookBar_OuterItemBorderBrush}" BorderThickness="{StaticResource RadOutlookBar_OuterBorderThickness}" telerik:RadDockPanel.Dock="Bottom">
                                    <Border BorderBrush="{StaticResource RadOutlookBar_InnerItemBorderBrush}" BorderThickness="{StaticResource RadOutlookBar_InnerBorderThickness}">
                                        <telerik:RadDockPanel HorizontalAlignment="Right">
                                            <ToggleButton x:Name="DropDownButtonElement" MinWidth="15" Style="{StaticResource OutlookFooterToggleButton}" IsChecked="{Binding IsDropDownOpen, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" telerik:RadDockPanel.Dock="Right">
                                                <telerikNavigation:RadContextMenu.ContextMenu>
                                                    <Telerik_Windows_Controls_TabControl:DropDownMenu x:Name="DropDownMenuElement" Style="{TemplateBinding DropDownStyle}" DisplayMemberPath="{TemplateBinding DropDownDisplayMemberPath}" ItemTemplate="{TemplateBinding ItemDropDownContentTemplate}" ItemTemplateSelector="{TemplateBinding ItemDropDownContentTemplateSelector}" IsOpen="{Binding IsChecked, ElementName=DropDownButtonElement, Mode=Twoway}" Placement="Bottom" StaysOpen="False"/>
                                                </telerikNavigation:RadContextMenu.ContextMenu>
                                                <ToolTipService.ToolTip>
                                                    <TextBlock Text="Configure buttons" telerik:LocalizationManager.ResourceKey="OutlookBarConfigureButtons"/>
                                                </ToolTipService.ToolTip>
                                                <Path Fill="{StaticResource RadOutlookBar_PathFill}" Height="3" Width="5" Data="M0,0 L5,0 3,3 0,0"/>
                                            </ToggleButton>
                                            <Telerik_Windows_Controls_OutlookBar:MinimizedOutlookBarArea x:Name="MinimizedAreaControl" IsTabStop="False" ItemTemplate="{TemplateBinding ItemMinimizedTemplate}" telerik:RadDockPanel.Dock="Right"/>
                                        </telerik:RadDockPanel>
                                    </Border>
                                </Border>
                                <ItemsPresenter x:Name="ItemsPresenterElement" telerik:RadDockPanel.Dock="Bottom"/>
                                <Thumb x:Name="HorizontalSplitter" Style="{TemplateBinding HorizontalSplitterStyle}" telerik:RadDockPanel.Dock="Bottom">
                                    <ToolTipService.ToolTip>
                                        <TextBlock Text="Start dragging in order to change items' position" telerik:LocalizationManager.ResourceKey="OutlookBarHorizontalSplitter"/>
                                    </ToolTipService.ToolTip>
                                </Thumb>
                                <ContentPresenter x:Name="ContentElement" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding SelectedContent}" ContentTemplate="{TemplateBinding SelectedContentTemplate}"/>
                            </telerik:RadDockPanel>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="{StaticResource RadOutlookBar_BorderBrush}"/>
        <Setter Property="DropDownDisplayMode" Value="Visible"/>
        <Setter Property="BorderThickness" Value="1"/>
        <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
        <Setter Property="VerticalContentAlignment" Value="Stretch"/>
        <Setter Property="ItemsPanel">
            <Setter.Value>
                <ItemsPanelTemplate>
                    <Telerik_Windows_Controls_OutlookBar:OutlookBarPanel/>
                </ItemsPanelTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="MinimizedAreaMinHeight" Value="31"/>
        <Setter Property="HorizontalSplitterStyle" Value="{StaticResource OutlookBarHorizontalSplitter}"/>
        <Setter Property="Background" Value="Transparent"/>
        <Setter Property="TabNavigation" Value="Once"/>
    </Style>
    <SolidColorBrush x:Key="RadOutlookBar_ForegroundSelectedItem" Color="White"/>
    <SolidColorBrush x:Key="RadOutlookBar_BackgroundSelectedItem" Color="#FF565656"/>
    <SolidColorBrush x:Key="RadOutlookBar_BackgroundOverItem" Color="#FF707070"/>
    <SolidColorBrush x:Key="RadOutlookBar_ForegroundItem" Color="White"/>
    <Style x:Key="RadOutlookBarItemStyle1" TargetType="telerikNavigation:RadOutlookBarItem">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="telerikNavigation:RadOutlookBarItem">
                    <Grid x:Name="wrapper" Height="28">
                        <VisualStateManager.VisualStateGroups>
                            <VisualStateGroup x:Name="CommonStateGroup">
                                <VisualState x:Name="Normal"/>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleElement" Storyboard.TargetProperty="Foreground">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadOutlookBar_ForegroundSelectedItem}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ControlBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadOutlookBar_BackgroundSelectedItem}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="MouseOver">
                                    <Storyboard>
                                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ControlBorder" Storyboard.TargetProperty="Background">
                                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource RadOutlookBar_BackgroundOverItem}"/>
                                        </ObjectAnimationUsingKeyFrames>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="ControlBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}">
                            <Border BorderBrush="{StaticResource RadOutlookBar_InnerItemBorderBrush}" BorderThickness="{StaticResource RadOutlookBar_InnerBorderThickness}" Padding="{TemplateBinding Padding}">
                                <telerik:RadDockPanel>
                                    <Image VerticalAlignment="{TemplateBinding VerticalContentAlignment}" Source="{TemplateBinding Icon}" Stretch="None" telerik:RadDockPanel.Dock="Left"/>
                                    <ContentControl x:Name="TitleElement" Margin="3 0 0 0" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}" Content="{TemplateBinding Header}" ContentTemplate="{TemplateBinding HeaderTemplate}" FontSize="15"/>
                                </telerik:RadDockPanel>
                            </Border>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="BorderBrush" Value="{StaticResource RadOutlookBar_OuterItemBorderBrush}"/>
        <Setter Property="IsTabStop" Value="False"/>
        <Setter Property="Foreground" Value="{StaticResource RadOutlookBar_ForegroundItem}"/>
        <Setter Property="BorderThickness" Value="{StaticResource RadOutlookBar_OuterBorderThickness}"/>
        <Setter Property="Padding" Value="3"/>
        <Setter Property="Background" Value="{StaticResource RadOutlookBar_BackgroundItem}"/>
        <Setter Property="HorizontalContentAlignment" Value="Left"/>
    </Style>

<!-- Usage -->

  <Grid x:Name="LayoutRoot">

        <telerikNavigation:RadOutlookBar Grid.Column="0" Grid.Row="1" BorderBrush="Transparent" Background="Transparent" FontSize="16" FontFamily="Century Gothic" Cursor="Hand" Style="{StaticResource RadOutlookBarStyle1}" x:Name="OutlookBarPhoenix">
        </telerikNavigation:RadOutlookBar>

       
    </Grid>

<!-- End -->

Regards,

Bhami.

[Hristo]

Hello Bhami,

I have tried to use the code you provided but could not reproduce the issue. I am attaching a sample project demonstrating my approach. Could you please modify it in order to introduce the issue you are experiencing?

Regards,
Hristo
Telerik