All the controls missing in WPF. Over 1 million downloads.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

516 lines
30 KiB

<!--***************************************************************************************
Extended WPF Toolkit
Copyright (C) 2007-2014 Xceed Software Inc.
This program is provided to you under the terms of the Microsoft Public
License (Ms-PL) as published at http://wpftoolkit.codeplex.com/license
For more features, controls, and fast professional support,
pick up the Plus Edition at http://xceed.com/wpf_toolkit
Stay informed: follow @datagrid on Twitter or Like http://facebook.com/datagrids
*************************************************************************************-->
<local:DemoView x:Class="Xceed.Wpf.Toolkit.LiveExplorer.Samples.Theming.Views.ThemingExtendedToolkitView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:Xceed.Wpf.Toolkit.LiveExplorer"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:xcdg="http://schemas.xceed.com/wpf/xaml/datagrid"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
Title="Theming WPF Extended Toolkit"
x:Name="_demo">
<local:DemoView.Description>
<Paragraph FontSize="14" FontFamily="Segoe">
<!--//# TODODOC -->
<Run>Changes the themes of the Extended WPF Toolkit controls. Available themes are System, Office2007 and Metro with accent color. The Xceed.Wpf.Toolkit.Themes.Office2007.dll or Xceed.Wpf.Toolkit.Themes.Metro.dll assembly is necessary to use the themes.</Run>
<!--##INCLUDE_OPEN_SOURCE
<LineBreak />
<Run>This feature is only available in the "Plus" version.</Run>
<LineBreak />
<Hyperlink NavigateUri="http://www.xceed.com/Extended_WPF_Toolkit_Intro.html" RequestNavigate="Hyperlink_RequestNavigate">
Click here for more details about Xceed Extended WPF Toolkit Plus.
</Hyperlink>
##END-->
</Paragraph>
</local:DemoView.Description>
<!--##EXCLUDE_OPEN_SOURCE-->
<local:DemoView.Resources>
<LinearGradientBrush x:Key="customAccentBrush1"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF0086c6"
Offset="0" />
<GradientStop Color="#FF66ccff"
Offset="0.94" />
<GradientStop Color="#FFddf4ff"
Offset="0.94" />
<GradientStop Color="#FFddf4ff"
Offset="0.97" />
<GradientStop Color="#FFddf4ff"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="customAccentBrush2"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FFff0099"
Offset="0" />
<GradientStop Color="#FF993366"
Offset="1" />
</LinearGradientBrush>
<LinearGradientBrush x:Key="customAccentBrush3"
EndPoint="0.5,1"
StartPoint="0.5,0">
<GradientStop Color="#FF9DE214"
Offset="0" />
<GradientStop Color="#FF9DE214"
Offset="0.2" />
<GradientStop Color="#FF95CA2A"
Offset="0.2" />
<GradientStop Color="#FF339933"
Offset="1" />
</LinearGradientBrush>
<Style x:Key="MetroSampleRadioButtonTemplate" TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" />
<VisualTransition From="Normal"
GeneratedDuration="0"
To="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
To="0.45"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="rectangle" />
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0"
To="0.35"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="rectangle" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0"
To="0.35"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="rectangle" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
To=".2"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="content" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0"
To="1"
Storyboard.TargetProperty="(UIElement.Opacity)"
Storyboard.TargetName="CheckIcon" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="content"
Width="20"
Height="20"
Fill="{TemplateBinding Background}" />
<Path x:Name="CheckIcon"
Data="M 619,736 C619,736 617,738 617,738 617,738 621,742 621,742 621,742 629,732 629,732 629,732 627,730 627,730 627,730 621,738 621,738 621,738 619,736 619,736 z"
Fill="White"
FlowDirection="LeftToRight"
Opacity="0"
Stretch="Fill"
UseLayoutRounding="False"
VerticalAlignment="Bottom"
HorizontalAlignment="Right"
Width="12"
Height="12"
Margin="0,0,1,1" />
<Rectangle x:Name="rectangle"
Fill="White"
Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<x:Array Type="sys:String" x:Key="checkList" >
<sys:String>Blue</sys:String>
<sys:String>Red</sys:String>
<sys:String>Yellow</sys:String>
<sys:String>Green</sys:String>
<sys:String>White</sys:String>
</x:Array>
<Style x:Key="TextBlockStyle"
TargetType="TextBlock">
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Margin" Value="2" />
<!--Foreground Property is set in code-behind-->
</Style>
</local:DemoView.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="400" />
</Grid.RowDefinitions>
<GroupBox Header="Features" Grid.Row="0" Margin="5">
<Grid Margin="5" HorizontalAlignment="Left">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Margin="0,5,5,5" Orientation="Horizontal">
<TextBlock Text="Themes:" Margin="0,5,5,5" VerticalAlignment="Center"/>
<ComboBox x:Name="themeComboBox" Width="150" Height="25">
<ComboBoxItem Selected="SystemComboBoxItem_Selected"
Content="System" />
<ComboBoxItem Selected="Office2007BlueComboBoxItem_Selected"
Content="Office 2007 Blue" />
<ComboBoxItem Selected="Office2007BlackComboBoxItem_Selected"
Content="Office 2007 Black" />
<ComboBoxItem Selected="Office2007SilverComboBoxItem_Selected"
Content="Office 2007 Silver" />
<ComboBoxItem x:Name="metroDarkComboBoxItem"
Selected="MetroDarkComboBoxItem_Selected"
Content="Metro Dark" />
<ComboBoxItem x:Name="metroLightComboBoxItem"
Selected="MetroLightComboBoxItem_Selected"
Content="Metro Light" />
</ComboBox>
</StackPanel>
<StackPanel x:Name="_accentColorPanel"
Grid.Column="1" Margin="10,0,0,0"
Orientation="Horizontal"
VerticalAlignment="Top"
HorizontalAlignment="Left"
Visibility="Hidden">
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel>
<TextBlock Text="Accent Color" />
<StackPanel Orientation="Horizontal">
<RadioButton Background="#FFF4B300"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Gold"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF78BA00"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="LightGreen"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF2673EC"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Blue"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFAE113D"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="MediumVioletRed"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF632F00"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Brown"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFB01E00"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="DarkRed"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFC1004F"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="PaleVioletRed"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF7200AC"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="DarkViolet"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF4617B4"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="DarkSlateBlue"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF006AC1"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="RoyalBlue"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF008287"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Teal"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF199900"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Green"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF00C13F"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Lime"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
</StackPanel>
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal" Margin="0,2,0,0">
<RadioButton Background="#FFFF981D"
Margin="0,0,2,0"
IsChecked="True"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="LightSalmon"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFFF2E12"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Red"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFFF1D77"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="DeepPink"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFAA40FF"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Purple"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF1FAEFF"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="DeepSkyBlue"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF56C5FF"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="DarkTurquoise"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF00D8CC"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Turquoise"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF91D100"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="YellowGreen"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFE1B700"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="DarkYellow"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFFF76BC"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Pink"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FF00A4A4"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="LightSeaGreen"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Background="#FFFF7D23"
Margin="0,0,2,0"
Checked="RadioButton_Checked"
GroupName="themeRadioGroup"
Tag="Orange"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
</StackPanel>
</Grid>
<StackPanel Margin="10,0,0,0">
<TextBlock Text="Custom Color"/>
<StackPanel Orientation="Horizontal">
<RadioButton Margin="0,0,2,0"
Checked="RadioButton_Checked"
Background="{StaticResource customAccentBrush1}"
GroupName="themeRadioGroup"
Tag="Custom1"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Margin="0,0,2,0"
Checked="RadioButton_Checked"
Background="{StaticResource customAccentBrush2}"
GroupName="themeRadioGroup"
Tag="Custom2"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
<RadioButton Margin="0,0,2,0"
Checked="RadioButton_Checked"
Background="{StaticResource customAccentBrush3}"
GroupName="themeRadioGroup"
Tag="Custom3"
Style="{StaticResource MetroSampleRadioButtonTemplate}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</GroupBox>
<TextBlock Grid.Row="1" Text="Usage:" Style="{StaticResource Header}" Margin="10" HorizontalAlignment="Left"/>
<Border x:Name="SampleBorder"
Grid.Row="2"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="2"
BorderBrush="Black">
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="IntegerUpDown:" Style="{StaticResource TextBlockStyle}"/>
<xctk:IntegerUpDown x:Name="_integerUpDown" Value="22" Grid.Column="1" Margin="5"/>
<TextBlock Text="CalculatorUpDown:" Grid.Row="1" Style="{StaticResource TextBlockStyle}"/>
<xctk:CalculatorUpDown Grid.Row="1" Grid.Column="1" Value="8" Margin="5"/>
<TextBlock Text="DateTimePicker:" Grid.Row="2" Style="{StaticResource TextBlockStyle}"/>
<xctk:DateTimePicker Grid.Row="2" Grid.Column="1" Format="ShortDate" Value="2012/11/16" Margin="5"/>
<TextBlock Text="CheckListBox:" Grid.Row="3" Style="{StaticResource TextBlockStyle}"/>
<xctk:CheckListBox Grid.Row="3" Grid.Column="1" ItemsSource="{StaticResource checkList}" SelectedItem="Red" Margin="5"/>
<TextBlock Text="DropDownButton:" Grid.Row="4" Style="{StaticResource TextBlockStyle}"/>
<xctk:DropDownButton Grid.Row="4" Grid.Column="1" Content="Show WatermarkTextBox" Margin="5">
<xctk:DropDownButton.DropDownContent>
<StackPanel>
<xctk:WatermarkTextBox Watermark="Enter text here" Width="150"/>
<xctk:WatermarkTextBox Watermark="Enter text here" Width="150"/>
<xctk:WatermarkTextBox Watermark="Enter text here" Width="150"/>
</StackPanel>
</xctk:DropDownButton.DropDownContent>
</xctk:DropDownButton>
<TextBlock Text="ColorPicker:" Grid.Row="5" Style="{StaticResource TextBlockStyle}"/>
<xctk:ColorPicker Grid.Row="5" Grid.Column="1" SelectedColor="Blue" DisplayColorAndName="True" Margin="5"/>
<TextBlock Text="MultiLineTextEditor:" Grid.Row="6" Style="{StaticResource TextBlockStyle}"/>
<xctk:MultiLineTextEditor Grid.Row="6" Grid.Column="1" Content="MultiLine" Text="This is a multi-line text editor." Margin="5" />
<TextBlock Text="MaskedTextBox:" Grid.Row="7" Style="{StaticResource TextBlockStyle}"/>
<xctk:MaskedTextBox Grid.Row="7" Grid.Column="1" Mask="(000) 000-0000" Text="5256963" Margin="5" />
</Grid>
<Grid Grid.Column="1">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<TextBlock Text="PropertyGrid:" Style="{StaticResource TextBlockStyle}"/>
<xctk:PropertyGrid Grid.Row="1" Margin="5" SelectedObject="{Binding ElementName=_integerUpDown}" ShowAdvancedOptions="True" AutoGenerateProperties="False" >
<xctk:PropertyGrid.PropertyDefinitions>
<xctk:PropertyDefinition TargetProperties="Background" />
<xctk:PropertyDefinition TargetProperties="BorderBrush" />
<xctk:PropertyDefinition TargetProperties="BorderThickness" />
<xctk:PropertyDefinition TargetProperties="FontFamily" />
<xctk:PropertyDefinition TargetProperties="FontSize" />
<xctk:PropertyDefinition TargetProperties="FontStretch" />
<xctk:PropertyDefinition TargetProperties="FontStyle" />
<xctk:PropertyDefinition TargetProperties="FontWeight" />
<xctk:PropertyDefinition TargetProperties="Foreground" />
<xctk:PropertyDefinition TargetProperties="IsTabStop" />
<xctk:PropertyDefinition TargetProperties="Content" />
<xctk:PropertyDefinition TargetProperties="HorizontalContentAlignment" />
<xctk:PropertyDefinition TargetProperties="VerticalContentAlignment" />
<xctk:PropertyDefinition TargetProperties="Visibility" />
<xctk:PropertyDefinition TargetProperties="Width" />
<xctk:PropertyDefinition TargetProperties="Height" />
</xctk:PropertyGrid.PropertyDefinitions>
</xctk:PropertyGrid>
</Grid>
</Grid>
</Border>
</Grid>
<!--##END-->
<!--##INCLUDE_OPEN_SOURCE
<Image Source="..\OpenSourceImages\ExtendedWPFToolkitControls.png" Width="700" Height="500"/>
##END-->
</local:DemoView>