摘要:DragDockPanel clean style in Silverlight
In this tip, i will show you how you can customize DragDockPanel style of http://blacklight.codeplex.com/. By default its color is black. In here i am going to create a clean style for the above dragDockPanel which can be considerate an alternate option to the existing design.
You can see the live example here [live demo]
The SOURCE CODE(.zip) is at the end of the page for download.
MainPage.xaml
<Grid x:Name=”LayoutRoot”>
<blackcontrols:DragDockPanelHost x:Name=”dragDockPanelMain” VerticalAlignment=”Top” HorizontalAlignment=”Stretch” Height=”600″ Background=”Transparent” Margin=”0,40,0,0″>
<blackcontrols:DragDockPanel HeaderTemplate=”{StaticResource DragDockPanelEmptyHeaderTemplate}” Style=”{StaticResource DragDockPanelControlTemplate}” Background=”White” />
<blackcontrols:DragDockPanel HeaderTemplate=”{StaticResource DragDockPanelEmptyHeaderTemplate}” Style=”{StaticResource DragDockPanelControlTemplate}” Background=”White”/>
<blackcontrols:DragDockPanel HeaderTemplate=”{StaticResource DragDockPanelEmptyHeaderTemplate}” Style=”{StaticResource DragDockPanelControlTemplate}” Background=”White”/>
<blackcontrols:DragDockPanel HeaderTemplate=”{StaticResource DragDockPanelEmptyHeaderTemplate}” Style=”{StaticResource DragDockPanelControlTemplate}” Background=”White”/>
<blackcontrols:DragDockPanel HeaderTemplate=”{StaticResource DragDockPanelEmptyHeaderTemplate}” Style=”{StaticResource DragDockPanelControlTemplate}” Background=”White”/>
<blackcontrols:DragDockPanel HeaderTemplate=”{StaticResource DragDockPanelEmptyHeaderTemplate}” Style=”{StaticResource DragDockPanelControlTemplate}” Background=”White”/>
blackcontrols:DragDockPanelHost>
<HyperlinkButton NavigateUri=”http://silverlightips.net” Foreground=”Blue” FontSize=”14″ Content=”Samples from http://silverlightips.net by Sharker Khaleed Mahmud” VerticalAlignment=”Top” HorizontalAlignment=”Center” IsTabStop=”False” />
</Grid>
App.xaml
<Application.Resources>
<Color x:Key=”HeaderColor” >#FFE7F6F9</Color>
<!–DragDockPanel Header–>
<DataTemplate x:Key=”DragDockPanelEmptyHeaderTemplate”>
<TextBlock Text=”{Binding}” Foreground=”Black” FontSize=”14″ Cursor=”Hand” />
</DataTemplate>
<!– DragDockPanel style –>
<!– blackcontrols:DragDockPanel” x:Key=”DragDockPanelControlTemplate”> –>
<Setter Property=”Background” Value=”#ff000000″ />
<Setter Property=”BorderBrush” Value=”#ff333333″ />
<Setter Property=”BorderThickness” Value=”1″ />
<Setter Property=”Template”>
<Setter.Value>
<ControlTemplate TargetType=”blackcontrols:DragDockPanel”>
<Grid>
<!– Border with white background –>
<blackcontrols:OuterGlowBorder
OuterGlowOpacity=”0.05″ OuterGlowSize=”15″
CornerRadius=”3,3,3,3″
Background=”{TemplateBinding Background}”
BorderBrush=”{TemplateBinding BorderBrush}”
BorderThickness=”{TemplateBinding BorderThickness}” >
<blackcontrols:InnerGlowBorder
InnerGlowOpacity=”1″ CornerRadius=”3,3,3,3″ InnerGlowColor=”#11ffffff” InnerGlowSize=”15,15,0,0″ Margin=”0″ Padding=”2″ ClipContent=”True”
Background=”Transparent” BorderThickness=”0″>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height=”Auto” />
<RowDefinition Height=”*” />
</Grid.RowDefinitions>
<!– Content presenter for hosting the content –>
<ContentPresenter Grid.Row=”1″
Content=”{TemplateBinding Content}”
ContentTemplate=”{TemplateBinding ContentTemplate}”/>
<Border Margin=”-2″ Padding=”3″ Height=”25″ Cursor=”Hand”>
<Border.Background>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”{StaticResource HeaderColor}” Offset=”1″/>
<GradientStop Color=”#FFFFFFFF” Offset=”0″/>
LinearGradientBrush>
</Border.Background>
<Border.OpacityMask>
<LinearGradientBrush EndPoint=”0.5,1″ StartPoint=”0.5,0″>
<GradientStop Color=”#FFECF4FB” Offset=”1″/>
<GradientStop Color=”#B2ECF4FB” Offset=”0″/>
</LinearGradientBrush>
</Border.OpacityMask>
<Grid>
<Border x:Name=”GripBarElement” CornerRadius=”3,3,0,0″ Background=”#00ffffff” VerticalAlignment=”Top” MinHeight=”30″ Cursor=”Hand”
Margin=”0,0,32,0″ IsHitTestVisible=”{TemplateBinding DraggingEnabled}”>
<Grid>
<ContentPresenter Content=”{TemplateBinding Header}”
ContentTemplate=”{TemplateBinding HeaderTemplate}” />
</Grid>
</Border>
<ToggleButton x:Name=”MaximizeToggleButton”
VerticalAlignment=”Top” HorizontalAlignment=”Right” IsChecked=”{Binding RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay, Path=IsMaximized}”
Margin=”0,0,5,0″ Width=”20″ Height=”20″ Cursor=”Hand”>
<ToggleButton.Template>
<ControlTemplate TargetType=”ToggleButton”>
<Border Background=”#7F000000″ CornerRadius=”2,2,2,2″>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name=”FocusStates”>
<VisualState x:Name=”Focused”/>
<VisualState x:Name=”Unfocused”/>
VisualStateGroup>
<VisualStateGroup x:Name=”CommonStates”>
<VisualState x:Name=”Disabled”/>
<VisualState x:Name=”Normal”/>
<VisualState x:Name=”MouseOver”>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Storyboard.TargetName=”rectangle” Storyboard.TargetProperty=”(UIElement.Opacity)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.6″/>
<SplineDoubleKeyFrame KeyTime=”00:00:00.2000000″ Value=”0.3″/>
DoubleAnimationUsingKeyFrames>
</Storyboard>
VisualState>
<VisualState x:Name=”Pressed”>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”rectangle” Storyboard.TargetProperty=”(UIElement.Opacity)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0.15″/>
DoubleAnimationUsingKeyFrames>
</Storyboard>
VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name=”CheckStates”>
<VisualState x:Name=”Checked”>
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”checkedArrow” Storyboard.TargetProperty=”(UIElement.Opacity)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”1″/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime=”00:00:00″ Duration=”00:00:00.0010000″ Storyboard.TargetName=”uncheckedArrow” Storyboard.TargetProperty=”(UIElement.Opacity)”>
<SplineDoubleKeyFrame KeyTime=”00:00:00″ Value=”0″/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name=”Unchecked”>
<Storyboard/>
</VisualState>
<VisualState x:Name=”Indeterminate”/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Height=”Auto” Width=”Auto”>
<Border Margin=”0,0,0,0″ BorderBrush=”#FFFFFFFF” BorderThickness=”1,1,1,1″ CornerRadius=”1,1,1,1″ Width=”16″ Height=”16″>
<Grid>
<Path HorizontalAlignment=”Right” Margin=”0,1.24500000476837,1.70700001716614,5.375″ x:Name=”uncheckedArrow” VerticalAlignment=”Stretch” Width=”6.752″ Stretch=”Fill” Stroke=”#FFFFFFFF” Data=”M0.5,1.005 L6.2509999,1.005 M6.25,6.8800006 L6.25,0.5 M6.2520003,1.0880001 L0.50000024,6.8800001″ />
<Path HorizontalAlignment=”Stretch” Margin=”1.45899999141693,5.74200010299683,5.78900003433228,0.878000020980835″ x:Name=”checkedArrow” VerticalAlignment=”Stretch” Stretch=”Fill” Stroke=”#FFFFFFFF” Data=”M0.5,1.005 L6.2509999,1.005 M6.25,6.8800006 L6.25,0.5 M6.2520003,1.0880001 L0.50000024,6.8800001″ Opacity=”0″ RenderTransformOrigin=”0.5,0.5″>
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle=”180″/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Grid>
</Border>
<Rectangle Fill=”#FFFFFFFF” RadiusX=”2″ RadiusY=”2″ Margin=”1,1,1,1″ Opacity=”0″ x:Name=”rectangle”/>
</Grid>
</Border>
ControlTemplate>
</ToggleButton.Template>
</ToggleButton>
</Grid>
</Border>
</Grid>
blackcontrols:InnerGlowBorder>
blackcontrols:OuterGlowBorder>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!– empty DragDockPanel style –>
<!– blackcontrols:DragDockPanel” x:Key=”DragDockPanelEmptyTemplate”> –>
<Setter Property=”Background” Value=”#ff000000″ />
<Setter Property=”BorderBrush” Value=”#ff333333″ />
<Setter Property=”BorderThickness” Value=”1″ />
<Setter Property=”Template”>
<Setter.Value>
blackcontrols:DragDockPanel”>
<Grid>
<!– Border with white background –>
<blackcontrols:OuterGlowBorder
OuterGlowOpacity=”0.05″ OuterGlowSize=”15″
CornerRadius=”3,3,3,3″
Background=”{TemplateBinding Background}”
BorderBrush=”{TemplateBinding BorderBrush}”
BorderThickness=”{TemplateBinding BorderThickness}” >
<blackcontrols:InnerGlowBorder
InnerGlowOpacity=”1″ CornerRadius=”3,3,3,3″ InnerGlowColor=”#11ffffff” InnerGlowSize=”15,15,0,0″ Margin=”0″ Padding=”2″ ClipContent=”True”
Background=”Transparent” BorderThickness=”0″>
<Grid>
<ContentPresenter
Content=”{TemplateBinding Content}”
ContentTemplate=”{TemplateBinding ContentTemplate}”/>
</Grid>
</blackcontrols:InnerGlowBorder>
</blackcontrols:OuterGlowBorder>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>