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.

532 lines
31 KiB

<!--***************************************************************************************
Toolkit for WPF
Copyright (C) 2007-2016 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 https://xceed.com/xceed-toolkit-plus-for-wpf/
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 Toolkit Plus For WPF"
x:Name="_demo">
<local:DemoView.Description>
<Paragraph FontSize="14" FontFamily="Segoe">
<Run>Changes the themes of the Toolkit for WPF controls. Available themes are System, Office2007, Windows10 and Metro with accent color. The Xceed.Wpf.Toolkit.Themes.Office2007.dll, Xceed.Wpf.Toolkit.Themes.Windows10.dll or Xceed.Wpf.Toolkit.Themes.Metro.dll assemblies are necessary to use the themes.</Run>
<!--##INCLUDE_OPEN_SOURCE
<LineBreak />
<Run>This feature is only available in the "Plus" version.</Run>
<LineBreak />
<Hyperlink NavigateUri="https://xceed.com/xceed-toolkit-plus-for-wpf" RequestNavigate="Hyperlink_RequestNavigate">
Click here for more details about Xceed Toolkit Plus for WPF.
</Hyperlink>
##END-->
</Paragraph>
</local:DemoView.Description>
<!--##EXCLUDE_OPEN_SOURCE-->
<local:DemoView.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="../ItemTemplates/Common.xaml" />
</ResourceDictionary.MergedDictionaries>
<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>
</ResourceDictionary>
</local:DemoView.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="450" />
</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 Selected="Windows10ComboBoxItem_Selected">
<ComboBoxItem.Content>
<DockPanel>
<TextBlock DockPanel.Dock="Left"
Text="Windows 10" />
<TextBlock TextAlignment="Right" Style="{StaticResource newSuffix}" />
</DockPanel>
</ComboBoxItem.Content>
</ComboBoxItem>
<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" />
<TextBlock Text="ToggleSwitch:" Grid.Row="8" Style="{StaticResource TextBlockStyle}"/>
<xctk:ToggleSwitch Grid.Row="8" Grid.Column="1" Margin="5" Height="20"/>
</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>