MARKUS

<UserControl x:Name="userControl" x:Class="KCOM.Controls.Sample" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

             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:controls="clr-namespace:KCOM.Controls"

             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:common="clr-namespace:KCOM.Common"

             xmlns:local="clr-namespace:KCOM.Controls" xmlns:System="clr-namespace:System;assembly=mscorlib"

             mc:Ignorable="d"  Background="#f5f5f5" xmlns:converter="clr-namespace:KCOM.Common.Converter"

             d:DesignHeight="600" d:DesignWidth="200" AllowDrop="False">

    <UserControl.Resources>

        <converter:ColorListToBrushConverter x:Key="ColorListToBrushConverter"/>

        <converter:CommentTypeImgConverter x:Key="converterTypeImageConverter"/>

        <converter:MarkupDataToConverter x:Key="markupDataConverter"/>

        <converter:MarginCorrectionConverter x:Key="marginConverter"/>

        <SolidColorBrush x:Key="ListTextSelectedColor" x:Shared="False"/>

        <SolidColorBrush x:Key="ListSelectedColor" x:Shared="False"/>

        <Style x:Key="ItemContainerStyle" TargetType="{x:Type telerik:RadListBoxItem}">

            <Setter Property="Template">

                <Setter.Value>

                    <ControlTemplate TargetType="{x:Type telerik:RadListBoxItem}">

                        <Border x:Name="myBorder" VerticalAlignment="Center"

                                Padding="0" Margin="0"

                                SnapsToDevicePixels="False">

                            <Border.Style>

                                <Style TargetType="{x:Type Border}">

                                    <Setter Property="BorderThickness" Value="3 3 3 3"/>

                                    <Setter Property="BorderBrush" Value="Transparent"/>

                                </Style>

                            </Border.Style>

                            <ContentPresenter Margin="2"/>

                        </Border>

                        <ControlTemplate.Triggers>

                            <Trigger Property="IsSelected" Value="true">

                                <Setter TargetName="myBorder" Property="BorderBrush" Value="{DynamicResource KCOMColor_AccentBrush}"/>

                            </Trigger>

                        </ControlTemplate.Triggers>

                    </ControlTemplate>

                </Setter.Value>

            </Setter>

            <!--<Style.Triggers>

                <DataTrigger Binding="{Binding Visible}" Value="Collapsed">

                    <Setter Property="Visibility" Value="Collapsed"/>

                </DataTrigger>

            </Style.Triggers>-->

        </Style>

        <ControlTemplate x:Key="RadExpanderControlTemplate1" TargetType="{x:Type telerik:RadExpander}">

            <Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">

                <VisualStateManager.VisualStateGroups>

                    <VisualStateGroup x:Name="CommonStateGroup">

                        <VisualState x:Name="Normal" />

                        <VisualState x:Name="Disabled">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0"

                                                               Storyboard.TargetName="InnerCircle"

                                                               Storyboard.TargetProperty="Stroke">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Disabled}" />

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Storyboard.TargetName="Content"

                                                 Storyboard.TargetProperty="Opacity"

                                                 To=".5" />

                                <DoubleAnimation Storyboard.TargetName="HeaderContent"

                                                 Storyboard.TargetProperty="Opacity"

                                                 To=".5" />

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="HeaderStateGroup">

                        <VisualState x:Name="NormalHeader" />

                        <VisualState x:Name="MouseOverHeader">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0"

                                                               Storyboard.TargetName="InnerCircle"

                                                               Storyboard.TargetProperty="Stroke">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_MouseOver}" />

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="PressedHeader">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Duration="0:0:0"

                                                               Storyboard.TargetName="InnerCircle"

                                                               Storyboard.TargetProperty="Stroke">

                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="{StaticResource ControlInnerBorder_Pressed}" />

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="HeaderOrientationGroup">

                        <VisualState x:Name="HorizontalOrientation">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="LayoutTransform">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <RotateTransform Angle="0" />

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Column)">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <System:Int32>1</System:Int32>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="VerticalOrientation">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="LayoutTransform">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <RotateTransform Angle="90" />

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderContentTransform" Storyboard.TargetProperty="(Grid.Row)">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <System:Int32>1</System:Int32>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="ExpandStateGroup">

                        <VisualState x:Name="Expanded">

                            <Storyboard>

                                <DoubleAnimation Duration="0:0:0.2"

                                                 Storyboard.TargetName="arrow"

                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).Angle"

                                                 To="180" />

                                <ColorAnimation

                                                Duration="0"

                                                Storyboard.TargetName="OuterCircle"

                                                Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)"

                                                To="#FF1FA3EB" />

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="Collapsed">

                            <Storyboard>

                                <DoubleAnimation Duration="0:0:0.2"

                                                 Storyboard.TargetName="arrow"

                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).Angle"

                                                 To="0" />

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                    <VisualStateGroup x:Name="ExpandDirectionStates">

                        <VisualStateGroup.Transitions>

                            <VisualTransition>

                                <Storyboard>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <System:Int32>0</System:Int32>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <System:Int32>0</System:Int32>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <System:Int32>0</System:Int32>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <System:Int32>0</System:Int32>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <GridLength>Auto</GridLength>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <GridLength>Auto</GridLength>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <GridLength>Auto</GridLength>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                    <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height">

                                        <DiscreteObjectKeyFrame KeyTime="0">

                                            <DiscreteObjectKeyFrame.Value>

                                                <GridLength>Auto</GridLength>

                                            </DiscreteObjectKeyFrame.Value>

                                        </DiscreteObjectKeyFrame>

                                    </ObjectAnimationUsingKeyFrames>

                                </Storyboard>

                            </VisualTransition>

                        </VisualStateGroup.Transitions>

                        <VisualState x:Name="DirectionLeft">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <GridLength>*</GridLength>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <GridLength>*</GridLength>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Column)">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <System:Int32>1</System:Int32>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Duration="0:0:0"

                                                 Storyboard.TargetName="arrowPanel"

                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).Angle"

                                                 To="90" />

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="DirectionRight">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col1" Storyboard.TargetProperty="Width">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <GridLength>*</GridLength>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <GridLength>*</GridLength>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Column)">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <System:Int32>1</System:Int32>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Duration="0:0:0"

                                                 Storyboard.TargetName="arrowPanel"

                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).Angle"

                                                 To="-90" />

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="DirectionUp">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <GridLength>*</GridLength>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row0" Storyboard.TargetProperty="Height">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <GridLength>*</GridLength>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="HeaderButton" Storyboard.TargetProperty="(Grid.Row)">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <System:Int32>1</System:Int32>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <DoubleAnimation Duration="0:0:0"

                                                 Storyboard.TargetName="arrowPanel"

                                                 Storyboard.TargetProperty="(UIElement.RenderTransform).Angle"

                                                 To="180" />

                            </Storyboard>

                        </VisualState>

                        <VisualState x:Name="DirectionDown">

                            <Storyboard>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="col0" Storyboard.TargetProperty="Width">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <GridLength>*</GridLength>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="row1" Storyboard.TargetProperty="Height">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <GridLength>*</GridLength>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Content" Storyboard.TargetProperty="(Grid.Row)">

                                    <DiscreteObjectKeyFrame KeyTime="0">

                                        <DiscreteObjectKeyFrame.Value>

                                            <System:Int32>1</System:Int32>

                                        </DiscreteObjectKeyFrame.Value>

                                    </DiscreteObjectKeyFrame>

                                </ObjectAnimationUsingKeyFrames>

                            </Storyboard>

                        </VisualState>

                    </VisualStateGroup>

                </VisualStateManager.VisualStateGroups>

                <Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}">

                    <Grid>

                        <Grid.RowDefinitions>

                            <RowDefinition x:Name="row0" Height="Auto" />

                            <RowDefinition x:Name="row1" Height="Auto" />

                        </Grid.RowDefinitions>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition x:Name="col0" Width="Auto" />

                            <ColumnDefinition x:Name="col1" Width="Auto" />

                        </Grid.ColumnDefinitions>

                        <telerik:RadToggleButton x:Name="HeaderButton"

                                                 HorizontalAlignment="{TemplateBinding HorizontalHeaderAlignment}"

                                                 VerticalAlignment="{TemplateBinding VerticalHeaderAlignment}"

                                                 HorizontalContentAlignment="{TemplateBinding HorizontalHeaderAlignment}"

                                                 VerticalContentAlignment="{TemplateBinding VerticalHeaderAlignment}"

                                                 Background="Transparent"

                                                 ClickMode="{TemplateBinding ClickMode}"

                                                 FontFamily="{TemplateBinding FontFamily}"

                                                 FontSize="{TemplateBinding FontSize}"

                                                 FontStretch="{TemplateBinding FontStretch}"

                                                 FontStyle="{TemplateBinding FontStyle}"

                                                 FontWeight="{TemplateBinding FontWeight}"

                                                 Foreground="{TemplateBinding Foreground}"

                                                 IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"

                                                 IsTabStop="{TemplateBinding IsTabStop}"

                                                 Padding="{TemplateBinding Padding}"

                                                 TabIndex="{TemplateBinding TabIndex}"

                                                 Template="{StaticResource ToggleTemplate}">

                            <Grid x:Name="HeaderPanel" Background="Transparent">

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="Auto" />

                                    <RowDefinition Height="*" />

                                </Grid.RowDefinitions>

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="Auto" />

                                    <ColumnDefinition Width="*" />

                                </Grid.ColumnDefinitions>

                                <Grid Grid.Row="0"

                                      Grid.Column="0"

                                      HorizontalAlignment="Left">

                                    <Ellipse x:Name="OuterCircle"

                                             Width="13"

                                             Height="13"

                                             HorizontalAlignment="Center"

                                             VerticalAlignment="Center"

                                             Fill="{StaticResource ControlBackground}"

                                             Stroke="#FFD6D4D4" />

                                    <Ellipse x:Name="InnerCircle"

                                             Width="11"

                                             Height="11"

                                             Margin="1,2"

                                             Stroke="{StaticResource ControlInnerBorder_Normal}" />

                                    <Grid x:Name="arrowPanel"

                                          Width="7"

                                          Height="4"

                                          RenderTransformOrigin=".5 .5">

                                        <Grid.RenderTransform>

                                            <RotateTransform />

                                        </Grid.RenderTransform>

                                        <Path x:Name="arrow"

                                              Data="M0,0 L0.67,0 4,2.67 7.25,0 8,0 8,0.67 4,4 0,0.75 z"

                                              Fill="#FF25A0DA"

                                              RenderTransformOrigin="0.5,0.5"

                                              Stretch="Fill">

                                            <Path.RenderTransform>

                                                <RotateTransform Angle="0" />

                                            </Path.RenderTransform>

                                        </Path>

                                    </Grid>

                                </Grid>

                                <telerik:LayoutTransformControl x:Name="HeaderContentTransform"

                                                                Grid.Row="0"

                                                                Grid.Column="0"

                                                                RenderTransformOrigin=".5 .5">

                                    <ContentPresenter x:Name="HeaderContent"

                                                      Grid.Column="1"

                                                      Margin="3,0,0,0"

                                                      HorizontalAlignment="Stretch"

                                                      VerticalAlignment="Stretch"

                                                      Content="{TemplateBinding Header}"

                                                      ContentTemplate="{TemplateBinding HeaderTemplate}" />

                                </telerik:LayoutTransformControl>

                            </Grid>

                        </telerik:RadToggleButton>

                        <ContentPresenter x:Name="Content"

                                          HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"

                                          VerticalAlignment="{TemplateBinding VerticalContentAlignment}"

                                          Content="{TemplateBinding Content}"

                                          ContentTemplate="{TemplateBinding ContentTemplate}"

                                          Visibility="Collapsed" />

                    </Grid>

                </Border>

            </Grid>

        </ControlTemplate>

        <DataTemplate x:Key="CommentSelectTemplate">

            <CheckBox IsChecked="{Binding IsSelected, Mode=TwoWay}" telerik:StyleManager.Theme="Windows8"

                      Command="{Binding SelectCommentCommand, ElementName=userControl, Mode=OneWay}">

                <StackPanel Orientation="Horizontal">

                    <TextBlock Text="{Binding Depart}" />

                    <TextBlock Text="/" />

                    <TextBlock Text="{Binding UserName}" />

                </StackPanel>

            </CheckBox>

        </DataTemplate>

    </UserControl.Resources>

    <Grid x:Name="grid" VerticalAlignment="Stretch">

        <!--<TextBlock Text="Sort By:"  Foreground="{DynamicResource KCOMColor_MarkerBrush}"/>-->

        <telerik:RadTabControl Margin="0,6,0,0" BorderThickness="0" telerik:StyleManager.Theme="VisualStudio2013"  HeaderBackground="#f5f5f5" FontSize="10" HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"

                               ScrollViewer.HorizontalScrollBarVisibility ="Disabled" SelectedIndex="0" Name="navigationTab" >

            <telerik:RadTabItem Header="Thumbnail"  HeaderForeground="{DynamicResource KCOMColor_MarkerBrush}" FontSize="12">

                <Grid>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="*"/>

                    </Grid.RowDefinitions>

                    <telerik:RadPathButton  ContentPlacement="Left"  telerik:StyleManager.Theme="Office2016"  CornerRadius="3"

                                                            PathGeometry="{telerik:RadGlyph Glyph={StaticResource GlyphGrid}, Foreground=White}" Height="24" Width="120" PathStyle="{StaticResource PathButtonStyle}"

                                                           Margin="2" Foreground="White" Content="Show All Pages" x:Name="btnPanorama" Click="btnPanorama_Click" Background="#FF0054B9" HorizontalAlignment="Right"/>

                    <Border BorderThickness="1" Margin="1" Grid.Row="1" BorderBrush="#FFC9C9C9" Background="White">

                        <StackPanel>

                            <RadioButton GroupName="grpPages" Content="All Pages" IsChecked="True" telerik:StyleManager.Theme="Office2013" FontSize="10" Margin="5,3" Checked="ShowPageChange" x:Name="rdoAllPages"/>

                            <RadioButton GroupName="grpPages" Content="Favorited Pages" FontSize="10" Margin="5,3" x:Name="rdoFavoritePages" Checked="ShowPageChange" />

                            <RadioButton GroupName="grpPages" Content="Commented Pages" FontSize="10" Margin="5,3" x:Name="rdoCommentPages" Checked="ShowPageChange" />

                            <Grid Margin="4.5,0" Visibility="{Binding IsChecked, Converter={StaticResource BooleanToVisibilityConverter}, ElementName=rdoCommentPages}">

                                <ListBox x:Name="lstSelectComment"

                                            BorderBrush="{DynamicResource KCOMColor_ActiveBrush}"

                                            BorderThickness="2"

                                            ItemTemplate="{StaticResource CommentSelectTemplate}"

                                            telerik:StyleManager.Theme="Office2016" />

                                <!--  <telerik:RadComboBox ClearSelectionButtonVisibility="Visible" ClearSelectionButtonContent="Select All" FontSize="10" Margin="14,0,0,0" x:Name="cboSelectComment" telerik:StyleManager.Theme="Windows8" BorderBrush="#FFA09E9E" ItemTemplate="{StaticResource CommentSelectTemplate}" SelectAllTextEvent="SelectionChanged"/>  -->

                            </Grid>

                        </StackPanel>

                    </Border>

                    <telerik:RadListBox x:Name="ImgListbox" Margin="1"

                                        Grid.Row="2"       

                                        Background="{DynamicResource KCOMColor_AlternativeBrush}" 

                                        ItemContainerStyle="{StaticResource ItemContainerStyle}"

                                        BorderBrush="#FFC2C2C2" BorderThickness="0"  

                                        SelectedIndex="0"

                                        ScrollViewer.HorizontalScrollBarVisibility="Disabled"

                                        ScrollViewer.VerticalScrollBarVisibility="Auto"

                                        ScrollViewer.CanContentScroll="True"

                                        telerik:StyleManager.Theme="Office2016" 

                                        ItemsSource="{Binding FilteredThumbnail.View, ElementName=userControl}">

                        <!--

                            VirtualizingStackPanel.IsVirtualizing를 True로 하면 빠른 속도로 선택시 

                            선택 이벤트에서 이루어지는 Wcf호출이 누락되는 경우가 발생된다.

                            VirtualizingPanel.VirtualizationMode="Standard"

                                        VirtualizingPanel.IsContainerVirtualizable="True"

                                        VirtualizingPanel.ScrollUnit="Item"

                                        VirtualizingPanel.CacheLengthUnit="Item"

                        -->

                        <VirtualizingPanel.IsVirtualizing>true</VirtualizingPanel.IsVirtualizing>

                        <!--<telerik:RadListBox.ItemsPanel>

                            <ItemsPanelTemplate>

                                <VirtualizingStackPanel/>

                            </ItemsPanelTemplate>

                        </telerik:RadListBox.ItemsPanel>-->

                        <telerik:RadListBox.ItemTemplate>

                            <DataTemplate>

                                <Grid x:Name="LayoutRoot">

                                    <Grid></Grid>

                                    <Grid VerticalAlignment="Center" >

                                        <Grid.RowDefinitions>

                                            <RowDefinition Height="Auto"/>

                                            <RowDefinition Height="Auto"/>

                                        </Grid.RowDefinitions>

                                        <Grid x:Name="imgRoot">

                                            <Border x:Name="imgBorder" BorderBrush="{DynamicResource KCOMColor_ReadOnlyBorderBrush}"

                                                     Visibility="{Binding IsActive,Mode=OneWayToSource, Converter={StaticResource BooleanToVisibilityConverter}}"

                                                     RenderTransformOrigin="0.5,0.5"  BorderThickness="1,1,1.5,1.5">

                                                <Border.RenderTransform>

                                                    <RotateTransform Angle="{Binding Angle, Mode=TwoWay}"/>

                                                </Border.RenderTransform>

                                                <Image Stretch="Uniform" Source="{Binding ImageUri,IsAsync=True}"/>

                                            </Border>

                                        </Grid>

                                        <TextBlock Grid.Row="1" Text="{Binding PageNumber, FallbackValue=PageNo}" FontStyle="Italic" FontSize="14" VerticalAlignment="Bottom" HorizontalAlignment="Center"/>

                                    </Grid>

                                    <Border Width="30" Height="20" VerticalAlignment="Top" Opacity="90" HorizontalAlignment="Right" Margin="10,5"

                                            Background="{Binding DisplayColorItems, Converter={StaticResource ColorListToBrushConverter}}">

                                        <!--<controls:MarkupColorList  ColorList="{Binding DisplayColorItems}"  Opacity="90"/>-->

                                    </Border>

                                </Grid>

                            </DataTemplate>

                        </telerik:RadListBox.ItemTemplate>

                        <!--<telerik:RadListBox.ItemsPanel>

                            <ItemsPanelTemplate>

                                <VirtualizingStackPanel/>

                            </ItemsPanelTemplate>

                        </telerik:RadListBox.ItemsPanel>-->

                    </telerik:RadListBox>

                </Grid>

            </telerik:RadTabItem>

            <telerik:RadTabItem Header="Markup List"  HeaderForeground="{DynamicResource KCOMColor_MarkerBrush}" FontSize="12" >

                <Grid HorizontalAlignment="Stretch">

                    <Grid.ColumnDefinitions>

                        <ColumnDefinition Width="*"/>

                    </Grid.ColumnDefinitions>

                    <Grid.RowDefinitions>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="Auto"/>

                        <RowDefinition Height="*"/>

                    </Grid.RowDefinitions>

                    <Border BorderThickness="0,0,0,1" BorderBrush="#e6e6e6" Background="#f5f5f5">

                        <Grid>

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition/>

                                <ColumnDefinition/>

                                <ColumnDefinition/>

                            </Grid.ColumnDefinitions>

                            <telerik:RadComboBox EmptyText="TYPE" Grid.Column="0"  HorizontalAlignment="Stretch" Margin="5" DropDownWidth="*" Background="White" BorderBrush="#d6d6d6" x:Name="commentType"

                                                 ClearSelectionButtonVisibility="Visible" ClearSelectionButtonContent="Show All" SelectionChanged="commentFilter_SelectionChanged">

                                <telerik:RadComboBox.ItemTemplate>

                                    <DataTemplate>

                                        <Image Source="{Binding Converter={StaticResource converterTypeImageConverter}}" Margin="5" Width="28" Height="28"/>

                                    </DataTemplate>

                                </telerik:RadComboBox.ItemTemplate>

                            </telerik:RadComboBox>

                            <telerik:RadComboBox HorizontalAlignment="Stretch" Margin="5" DropDownWidth="*" Background="White" BorderBrush="#d6d6d6" x:Name="commentUser"

                                             FontSize="10" Grid.Column="1"

                                             SelectionChanged="commentFilter_SelectionChanged" ClearSelectionButtonVisibility="Visible" ClearSelectionButtonContent="Show All"

                                             EmptyText="USER">

                                <!--ItemsSource="{Binding UsersCommentPagesList, ElementName=userControl}"-->

                            </telerik:RadComboBox>

                            <telerik:RadComboBox EmptyText="PAGE" Grid.Column="2"  HorizontalAlignment="Stretch" Margin="5" DropDownWidth="*" Background="White" BorderBrush="#d6d6d6" x:Name="commentPage"

                                                  ClearSelectionButtonVisibility="Visible" ClearSelectionButtonContent="Show All" SelectionChanged="commentFilter_SelectionChanged"/>

                        </Grid>

                    </Border>

                    <Border Grid.Row="1" Background="#FFE6E6E6">

                        <StackPanel>

                            <Border>

                                <Grid Height="28" Margin="0,4">

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="*"/>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <TextBox  HorizontalAlignment="Stretch" Style="{StaticResource ClearTextBoxStyle}" Margin="2" x:Name="txtSearch"

                                              telerik:StyleManager.Theme="Office2016" AcceptsReturn="False" Background="#FFF3F3F3"

                                              BorderThickness="1" VerticalContentAlignment="Center" IsTabStop="True" KeyDown="TxtSearch_KeyDown"/>

                                    <telerik:RadPathButton Grid.Column="1" ContentPlacement="Left" VerticalContentAlignment="Center" telerik:StyleManager.Theme="Office2016"

                                                            PathGeometry="{telerik:RadGlyph Glyph={StaticResource GlyphZoom}, Foreground=White}"

                                                          Width="80" PathStyle="{StaticResource PathButtonStyle}"  CornerRadius="3"

                                                           Margin="2" Foreground="White" Content="SEARCH" x:Name="btnSearch" Click="btnSearch_Click" Background="#FF0054B9"/>

                                </Grid>

                            </Border>

                        </StackPanel>

                    </Border>

                    <Border Grid.Row="1" Background="#f5f5f5" Visibility="Collapsed">

                        <StackPanel>

                            <Border>

                                <Grid>

                                    <Grid.ColumnDefinitions>

                                        <ColumnDefinition Width="36"/>

                                        <ColumnDefinition Width="*"/>

                                        <ColumnDefinition Width="Auto"/>

                                    </Grid.ColumnDefinitions>

                                    <Image Source="/KCOM;component/Resources/Images/MenuImage_New/arrow.png" Margin="5"/>

                                    <StackPanel Orientation="Vertical" Grid.Column="1" Margin="10" VerticalAlignment="Center">

                                        <TextBlock Text="" FontWeight="DemiBold" Foreground="#3d3d3d"/>

                                        <TextBlock Text=""/>

                                    </StackPanel>

                                    <Border Background="#FF1258B6" CornerRadius="5" Grid.Column="2" Padding="5" Margin="10">

                                        <Button Background="Transparent" Foreground="White" Content="Move" BorderThickness="0"/>

                                    </Border>

                                </Grid>

                            </Border>

                        </StackPanel>

                    </Border>

                    <Border VerticalAlignment="Stretch" Margin="0" Grid.Row="2" BorderThickness="0,0,0,0.5" BorderBrush="#828282" x:Name="gogo">

                        <telerik:RadListBox telerik:StyleManager.Theme="Office2016" Padding="0" Margin="2" HorizontalAlignment="Stretch" x:Name="MarkupList" ScrollViewer.VerticalScrollBarVisibility="Auto"

                                             Background="White" ItemsSource="{Binding MarkupInfoSmallList}" Loaded="MarkupList_Loaded">

                            <telerik:RadListBox.ItemContainerStyle>

                                <Style TargetType="telerik:RadListBoxItem">

                                    <Setter Property="Padding" Value="0,0,0,0"/>

                                </Style>

                            </telerik:RadListBox.ItemContainerStyle>

                            <telerik:RadListBox.ItemTemplate>

                                <DataTemplate>

                                    <StackPanel>

                                        <Border BorderBrush="#EBFBFCFD" BorderThickness="1" Margin="1" Padding="1,3">

                                            <Grid>

                                                <Grid.ColumnDefinitions>

                                                    <ColumnDefinition Width="5"/>

                                                    <ColumnDefinition Width="36"/>

                                                    <ColumnDefinition Width="*"/>

                                                    <ColumnDefinition Width="Auto"/>

                                                </Grid.ColumnDefinitions>

                                                <Border Width="5" Background="#CE3D5DA0">

                                                    <Border.Style>

                                                        <Style TargetType="Border">

                                                            <Setter Property="Visibility" Value="Collapsed"/>

                                                            <Style.Triggers>

                                                                <DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=telerik:RadListBoxItem, AncestorLevel=1}}" Value="True">

                                                                    <Setter Property="Visibility" Value="Visible"/>

                                                                </DataTrigger>

                                                            </Style.Triggers>

                                                        </Style>

                                                    </Border.Style>

                                                </Border>

                                                <Image Grid.Column="1" Source="{Binding Data_Type, Converter={StaticResource converterTypeImageConverter}}" Margin="5,0" Width="28" Height="28"/>

                                                <StackPanel Orientation="Vertical" Grid.Row="0" Grid.Column="2" Margin="5,0" VerticalAlignment="Center">

                                                    <TextBlock Text="{Binding UserName}" FontWeight="DemiBold" Foreground="#3d3d3d"/>

                                                    <StackPanel Orientation="Horizontal">

                                                        <TextBlock Text="{Binding PageNumber}"/>

                                                        <TextBlock Text=" Page"/>

                                                    </StackPanel>

                                                </StackPanel>

                                                <telerik:RadPathButton Grid.Column="3" ContentPlacement="Left" VerticalContentAlignment="Center" telerik:StyleManager.Theme="Office2016"

                                                            PathGeometry="{telerik:RadGlyph Glyph={StaticResource GlyphFrontElement}, Foreground=White}"

                                                          Width="60" Height="28" PathStyle="{StaticResource PathButtonStyle}" CornerRadius="3"

                                                           Margin="2" Foreground="White" Content="Move" x:Name="btnSearch" Click="btGotoMarkup_Click" Background="#FF0054B9"  CommandParameter="{Binding}">

                                                </telerik:RadPathButton>

                                                <!--<telerik:RadButton Background="Transparent" Foreground="White" Content="Move" BorderThickness="0" Click="btGotoMarkup_Click" CommandParameter="{Binding}"/>-->

                                            </Grid>

                                        </Border>

                                    </StackPanel>

                                </DataTemplate>

                            </telerik:RadListBox.ItemTemplate>

                        </telerik:RadListBox>

                    </Border>

                    <!--<Border VerticalAlignment="Stretch" Margin="0" Grid.Row="1" BorderThickness="0,0,0,0.5" BorderBrush="#828282" Background="White">

                        -->

                    <!--<Grid VerticalAlignment="Top" Margin="0" Grid.Row="1">

                        <Grid.Resources>

                            <Style TargetType="TextBlock">

                                <Setter Property="Foreground" Value="#828282"/>

                            </Style>

                        </Grid.Resources>

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition Width="Auto"/>

                            <ColumnDefinition Width="7*"/>

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition/>

                            <RowDefinition/>

                            <RowDefinition/>

                        </Grid.RowDefinitions>

                        <TextBlock Text="Cloud" Padding="5"/>

                        <TextBlock Text="Sejung Kim" Grid.Row="0" Grid.Column="1" Padding="5"/>

                        <TextBlock Text="Page 20" Grid.Column="0" Grid.Row="1" Padding="5"/>

                        <TextBlock Text="2017/10/17 17:56:51" Grid.Column="1" Grid.Row="1" Padding="5"/>

                        <TextBlock Text="Double click to Note." Grid.ColumnSpan="2" Grid.Row="2" Padding="5"/>

                    </Grid>-->

                    <!--<telerik:RadListBox ItemsSource="{Binding _markupInfoList, Mode=OneWayToSource, Source={x:Static common:ViewerDataModel.Instance}}">

                            <telerik:RadListBox.ItemTemplate>

                                <DataTemplate>

                                    <TextBlock Text="{Binding UserName}"/>

                                </DataTemplate>

                            </telerik:RadListBox.ItemTemplate>

                        </telerik:RadListBox>-->

                    <!--

                        <TextBlock Text="{Binding MAMA, Mode=OneWay, Source={x:Static common:ViewerDataModel.Instance}}"/>

                    </Border>-->

                </Grid>

            </telerik:RadTabItem>

            <!--<telerik:RadTabItem HeaderForeground="{DynamicResource KCOMColor_MarkerBrush}" FontSize="9">

                <telerik:RadTabItem.Header>

                    -->

            <!--<telerik:RadRibbonButton Content="Panorama" telerik:StyleManager.Theme="Office2016" FontSize="10" Margin="0,0,0,1" Background="#FF0054B9" Foreground="White"

                                       BorderThickness="0" CornerRadius="3" Padding="5" x:Name="btnPanorama" Click="btnPanorama_Click"/>-->

            <!--

                    <telerik:RadPathButton Grid.Column="1" ContentPlacement="Left" VerticalContentAlignment="Center" telerik:StyleManager.Theme="Office2016"

                                                            PathGeometry="{telerik:RadGlyph Glyph={StaticResource GlyphZoom}, Foreground=White}"

                                                       FontFamily="{StaticResource TelerikWebUI}" Width="80" PathStyle="{StaticResource PathButtonStyle}"

                                                           Margin="2" Foreground="White" Content="Panorama" x:Name="btnPanorama" Click="btnPanorama_Click" Background="#FF0054B9"/>

                </telerik:RadTabItem.Header>

            </telerik:RadTabItem>-->

        </telerik:RadTabControl>

    </Grid>

</UserControl>