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.
979 lines
58 KiB
979 lines
58 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:MaterialDemoView x:Class="Xceed.Wpf.Toolkit.LiveExplorer.Samples.MaterialControls.Views.MaterialControlsView"
|
|
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:sys="clr-namespace:System;assembly=mscorlib"
|
|
Title="MaterialControls">
|
|
<local:DemoView.Description>
|
|
<Paragraph FontSize="14"
|
|
FontFamily="Segoe">
|
|
<Run>The Material controls redefine the base controls by adding smooth animations and special effects. They also combine the base controls together to create new controls.</Run>
|
|
<LineBreak />
|
|
<LineBreak />
|
|
<Run>The Material controls include a set of complimentary accent brush and foreground.</Run>
|
|
<!--##INCLUDE_OPEN_SOURCE
|
|
<LineBreak />
|
|
<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>
|
|
|
|
<Path x:Key="IconVolumeUp"
|
|
Data="M17.071346,6.6599999C17.78875,8.1508932 18.122005,9.9854851 17.917633,11.917816 17.780151,13.210711 17.415701,14.404805 16.885771,15.449L15.177,14.644304C15.617841,13.787608 15.9243,12.790113 16.036884,11.719817 16.208162,10.105325 15.913901,8.568861 15.306683,7.365747z M20.566984,5.2669997C21.512329,7.3320866 21.947803,9.7617378 21.678318,12.318976 21.49543,14.033849 21.006458,15.634024 20.297501,17.052L18.59,16.251213C19.210964,15.018133 19.637339,13.622355 19.796829,12.11588 20.034515,9.8762961 19.647739,7.7448602 18.813787,5.9662089z M13.335,0L13.335,21.334999 5.6516771,14.88951 0,14.88951 0,6.4454007 5.6543674,6.4454007z"
|
|
Stretch="Uniform"
|
|
Fill="#FFFFFFFF"
|
|
Width="36"
|
|
Height="36"
|
|
Margin="0,0,0,0"
|
|
RenderTransformOrigin="0.5,0.5" />
|
|
<Path x:Key="IconVolumeDown"
|
|
Data="M17.069859,6.6599998C17.78598,8.1508932 18.11929,9.9855452 17.916285,11.917816 17.779579,13.210711 17.413668,14.404805 16.884953,15.449L15.174,14.644304C15.615413,13.787608 15.922723,12.790213 16.034725,11.719917 16.207932,10.105325 15.910922,8.568861 15.305504,7.365747z M13.333,0L13.333,21.333 5.6509034,14.889021 0,14.889021 0,6.445189 5.6522733,6.445189z"
|
|
Stretch="Uniform"
|
|
Fill="#FFFFFFFF"
|
|
Width="36"
|
|
Height="36"
|
|
Margin="0,0,0,0"
|
|
RenderTransformOrigin="0.5,0.5" />
|
|
<Path x:Key="IconVolumeMinus"
|
|
Data="M16.92,9.7449998L25.690001,9.7449998 25.690001,11.589 16.92,11.589z M11.066152,4.8618717L6.4789848,8.7133774 2.2655792,8.7133774 2.2655792,12.622222 6.4737949,12.622222 11.066152,16.473669z M13.333,0L13.333,21.333 5.6508131,14.889091 0,14.889091 0,6.4452193 5.6522131,6.4452193z"
|
|
Stretch="Uniform"
|
|
Fill="#FFFFFFFF"
|
|
Width="24"
|
|
Height="24"
|
|
Margin="0,0,0,0"
|
|
RenderTransformOrigin="0.5,0.5" />
|
|
<Path x:Key="IconVolumeMute"
|
|
Data="M17.648219,6.9439999L20.472552,9.7694447 23.299285,6.9439999 24.802002,8.4505004 21.97767,11.275985 24.799303,14.09623 23.294185,15.6014 20.472552,12.778555 17.648219,15.604001 16.143001,14.098829 18.968634,11.275985 16.143001,8.4505004z M11.066151,4.8619084L6.479044,8.7121162 2.2668591,8.7121162 2.2668591,12.622163 6.4750738,12.622163 11.066151,16.473691z M13.333,0L13.333,21.332999 5.6509323,14.88902 0,14.88902 0,6.4451885 5.6534328,6.4451885z"
|
|
Stretch="Uniform"
|
|
Fill="#FFFFFFFF"
|
|
Width="18"
|
|
Height="18"
|
|
Margin="0,0,0,0"
|
|
RenderTransformOrigin="0.5,0.5" />
|
|
|
|
<Style x:Key="ToolTipTextStyle"
|
|
TargetType="{x:Type TextBlock}">
|
|
<Setter Property="FontWeight"
|
|
Value="Bold" />
|
|
<Setter Property="HorizontalAlignment"
|
|
Value="Left" />
|
|
<Setter Property="VerticalAlignment"
|
|
Value="Top" />
|
|
<Setter Property="Foreground"
|
|
Value="Black" />
|
|
<Style.Triggers>
|
|
<Trigger Property="IsMouseOver"
|
|
Value="True">
|
|
<Setter Property="Foreground"
|
|
Value="{Binding Tag, RelativeSource={RelativeSource Self}}" />
|
|
</Trigger>
|
|
</Style.Triggers>
|
|
</Style>
|
|
|
|
</local:DemoView.Resources>
|
|
|
|
<Grid>
|
|
<xctk:MaterialTabControl x:Name="_materialTabControl"
|
|
MaterialAccent="LightBlue"
|
|
SelectionChanged="MaterialTabControl_SelectionChanged">
|
|
<xctk:MaterialTabItem Header="Controls Page 1"
|
|
Padding="20"
|
|
FontSize="12">
|
|
<StackPanel Orientation="Horizontal"
|
|
HorizontalAlignment="Center">
|
|
|
|
<xctk:MaterialFrame Margin="16"
|
|
VerticalContentAlignment="Top"
|
|
Z="4">
|
|
<StackPanel Orientation="Vertical"
|
|
HorizontalAlignment="Left"
|
|
Margin="20">
|
|
<TextBlock Text="Buttons : " />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Height="28"
|
|
Width="120"
|
|
Content="Button 1"
|
|
MaterialAccent="Blue" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Height="28"
|
|
Width="120"
|
|
Content="Button 2"
|
|
MaterialAccent="LightBlue" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Height="28"
|
|
Width="120"
|
|
Content="Button 3"
|
|
MaterialAccent="Cyan" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Height="28"
|
|
Width="120"
|
|
Content="Button 4"
|
|
MaterialAccent="Teal" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Height="28"
|
|
Width="120"
|
|
Content="Button 5"
|
|
MaterialAccent="Green" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Height="28"
|
|
Width="120"
|
|
Content="Button 6"
|
|
MaterialAccent="LightGreen" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Height="28"
|
|
Width="120"
|
|
Content="Button 7"
|
|
MaterialAccent="Lime" />
|
|
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
|
|
<xctk:MaterialFrame Margin="16"
|
|
VerticalContentAlignment="Top"
|
|
Z="4">
|
|
<StackPanel Orientation="Vertical"
|
|
HorizontalAlignment="Left"
|
|
Margin="20">
|
|
<TextBlock Text="Round Buttons : " />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Mode="Circle"
|
|
Height="64"
|
|
Width="64"
|
|
Content="{StaticResource IconVolumeUp}"
|
|
MaterialAccent="Blue" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Mode="Circle"
|
|
Height="48"
|
|
Width="48"
|
|
Content="{StaticResource IconVolumeDown}"
|
|
MaterialAccent="LightBlue" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Mode="Circle"
|
|
Height="36"
|
|
Width="36"
|
|
Content="{StaticResource IconVolumeMinus}"
|
|
MaterialAccent="Cyan" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Mode="Circle"
|
|
Height="24"
|
|
Width="24"
|
|
Content="{StaticResource IconVolumeMute}"
|
|
MaterialAccent="Teal" />
|
|
<xctk:MaterialButton Margin="0,8,0,0"
|
|
Mode="Circle"
|
|
Height="18"
|
|
Width="18"
|
|
Content=""
|
|
MaterialAccent="Green" />
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
|
|
<xctk:MaterialFrame Margin="16"
|
|
VerticalContentAlignment="Top"
|
|
Z="4">
|
|
<StackPanel Orientation="Vertical"
|
|
HorizontalAlignment="Left"
|
|
Margin="20">
|
|
<TextBlock Text="Radio Buttons : " />
|
|
<xctk:MaterialRadioButton Content="Option 1"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Blue" />
|
|
<xctk:MaterialRadioButton Content="Option 2"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="LightBlue" />
|
|
<xctk:MaterialRadioButton Content="Option 3"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Cyan" />
|
|
<xctk:MaterialRadioButton Content="Option 4"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Teal" />
|
|
<xctk:MaterialRadioButton Content="Option 5"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Green" />
|
|
<xctk:MaterialRadioButton Content="Option 6"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="LightGreen" />
|
|
<xctk:MaterialRadioButton Content="Option 7"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Lime" />
|
|
<xctk:MaterialRadioButton Content="Option 8"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Yellow" />
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
</StackPanel >
|
|
</xctk:MaterialTabItem>
|
|
<xctk:MaterialTabItem Header="Controls Page 2"
|
|
Padding="20"
|
|
FontSize="12">
|
|
<StackPanel Orientation="Horizontal"
|
|
HorizontalAlignment="Center">
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Top"
|
|
Margin="16">
|
|
<StackPanel Orientation="Vertical"
|
|
Margin="20"
|
|
Width="260">
|
|
<TextBlock Text="TextFields : " />
|
|
<xctk:MaterialTextField Watermark="First Name"
|
|
Margin="0,36,0,0"
|
|
MaterialAccent="Blue" />
|
|
<xctk:MaterialTextField Watermark="Last Name"
|
|
Margin="0,36,0,0"
|
|
MaterialAccent="Blue" />
|
|
<xctk:MaterialTextField Watermark="Company Name"
|
|
Margin="0,36,0,0"
|
|
MaterialAccent="Blue" />
|
|
<xctk:MaterialTextField Watermark="Address"
|
|
Margin="0,36,0,0"
|
|
MaterialAccent="Blue" />
|
|
<xctk:MaterialTextField Watermark="Address Line 2"
|
|
Margin="0,36,0,0"
|
|
MaterialAccent="Blue" />
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
<xctk:MaterialFrame Z="4"
|
|
Margin="16"
|
|
VerticalContentAlignment="Top">
|
|
<StackPanel Margin="20">
|
|
<TextBlock Text="CheckBoxes: " />
|
|
<xctk:MaterialCheckBox Content="Option 1"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Blue"
|
|
IsChecked="True" />
|
|
<xctk:MaterialCheckBox Content="Option 2"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="LightBlue"
|
|
IsChecked="True" />
|
|
<xctk:MaterialCheckBox Content="Option 3"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Cyan"
|
|
IsChecked="True" />
|
|
<xctk:MaterialCheckBox Content="Option 4"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Teal"
|
|
IsChecked="True" />
|
|
<xctk:MaterialCheckBox Content="Option 5"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Green"
|
|
IsChecked="True" />
|
|
<xctk:MaterialCheckBox Content="Option 6"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="LightGreen"
|
|
IsChecked="True" />
|
|
<xctk:MaterialCheckBox Content="Option 7"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Lime"
|
|
IsChecked="True" />
|
|
<xctk:MaterialCheckBox Content="Option 8"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Yellow"
|
|
IsChecked="True" />
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
<xctk:MaterialFrame Z="4"
|
|
Margin="16"
|
|
VerticalContentAlignment="Top">
|
|
<StackPanel Margin="20">
|
|
<TextBlock Text="DropDowns: " />
|
|
<xctk:MaterialDropDown Content="DropDown Button 1"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Blue">
|
|
<xctk:MaterialDropDown.DropDownContent>
|
|
<Border CornerRadius="2"
|
|
Height="46"
|
|
Width="160">
|
|
<TextBlock Text="DropDown Content"
|
|
Foreground="Black"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center" />
|
|
</Border>
|
|
</xctk:MaterialDropDown.DropDownContent>
|
|
</xctk:MaterialDropDown>
|
|
<xctk:MaterialDropDown Content="DropDown Button 2"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="LightBlue">
|
|
<xctk:MaterialDropDown.DropDownContent>
|
|
<Border CornerRadius="2"
|
|
Height="46"
|
|
Width="160">
|
|
<TextBlock Text="DropDown Content"
|
|
Foreground="Black"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center" />
|
|
</Border>
|
|
</xctk:MaterialDropDown.DropDownContent>
|
|
</xctk:MaterialDropDown>
|
|
<xctk:MaterialDropDown Content="DropDown Button 3"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Cyan">
|
|
<xctk:MaterialDropDown.DropDownContent>
|
|
<Border CornerRadius="2"
|
|
Height="46"
|
|
Width="160">
|
|
<TextBlock Text="DropDown Content"
|
|
Foreground="Black"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center" />
|
|
</Border>
|
|
</xctk:MaterialDropDown.DropDownContent>
|
|
</xctk:MaterialDropDown>
|
|
<xctk:MaterialDropDown Content="DropDown Button 4"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Teal">
|
|
<xctk:MaterialDropDown.DropDownContent>
|
|
<Border CornerRadius="2"
|
|
Height="46"
|
|
Width="160">
|
|
<TextBlock Text="DropDown Content"
|
|
Foreground="Black"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center" />
|
|
</Border>
|
|
</xctk:MaterialDropDown.DropDownContent>
|
|
</xctk:MaterialDropDown>
|
|
<xctk:MaterialDropDown Content="DropDown Button 5"
|
|
Margin="0,8,0,0"
|
|
MaterialAccent="Green">
|
|
<xctk:MaterialDropDown.DropDownContent>
|
|
<Border CornerRadius="2"
|
|
Height="46"
|
|
Width="160">
|
|
<TextBlock Text="DropDown Content"
|
|
Foreground="Black"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center" />
|
|
</Border>
|
|
</xctk:MaterialDropDown.DropDownContent>
|
|
</xctk:MaterialDropDown>
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
</StackPanel>
|
|
</xctk:MaterialTabItem>
|
|
<xctk:MaterialTabItem Header="Controls Page 3"
|
|
Padding="20"
|
|
FontSize="12">
|
|
<StackPanel Orientation="Horizontal"
|
|
HorizontalAlignment="Center">
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Top"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="16">
|
|
<StackPanel Margin="20">
|
|
<TextBlock Text="Switches : " />
|
|
<xctk:MaterialSwitch Width="80"
|
|
Margin="0,12,0,0"
|
|
MaterialAccent="Blue"
|
|
IsChecked="True" />
|
|
<xctk:MaterialSwitch Width="90"
|
|
Margin="0,12,0,0"
|
|
MaterialAccent="LightBlue"
|
|
IsChecked="True" />
|
|
<xctk:MaterialSwitch Width="100"
|
|
Margin="0,12,0,0"
|
|
MaterialAccent="Cyan"
|
|
IsChecked="True" />
|
|
<xctk:MaterialSwitch Width="110"
|
|
Margin="0,12,0,0"
|
|
MaterialAccent="Teal"
|
|
IsChecked="True" />
|
|
<xctk:MaterialSwitch Width="120"
|
|
Margin="0,12,0,0"
|
|
MaterialAccent="Green"
|
|
IsChecked="True" />
|
|
<xctk:MaterialSwitch Width="130"
|
|
Margin="0,12,0,0"
|
|
MaterialAccent="LightGreen"
|
|
IsChecked="True" />
|
|
<xctk:MaterialSwitch Width="140"
|
|
Margin="0,12,0,0"
|
|
MaterialAccent="Lime"
|
|
IsChecked="True" />
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Top"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="16">
|
|
<StackPanel Margin="15">
|
|
<TextBlock Text="Sliders : " />
|
|
<Grid TextElement.Foreground="Black">
|
|
<Grid.ColumnDefinitions>
|
|
<ColumnDefinition Width="Auto" />
|
|
<ColumnDefinition Width="Auto" />
|
|
</Grid.ColumnDefinitions>
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="Auto" />
|
|
</Grid.RowDefinitions>
|
|
|
|
<TextBlock Text="Volume:"
|
|
Margin="0,15,0,15" />
|
|
<xctk:MaterialSlider Grid.Column="1"
|
|
Width="120"
|
|
MaterialAccent="Blue"
|
|
Minimum="0"
|
|
Maximum="10"
|
|
VerticalAlignment="Center" />
|
|
<TextBlock Text="Bass:"
|
|
Grid.Row="1"
|
|
Margin="0,15,0,15" />
|
|
<xctk:MaterialSlider Grid.Row="1"
|
|
Grid.Column="1"
|
|
Width="120"
|
|
MaterialAccent="LightBlue"
|
|
Minimum="0"
|
|
Maximum="10"
|
|
VerticalAlignment="Center" />
|
|
<TextBlock Text="Treble:"
|
|
Grid.Row="2"
|
|
Margin="0,15,0,15" />
|
|
<xctk:MaterialSlider Grid.Row="2"
|
|
Grid.Column="1"
|
|
Width="120"
|
|
MaterialAccent="Cyan"
|
|
Minimum="0"
|
|
Maximum="10"
|
|
VerticalAlignment="Center" />
|
|
<TextBlock Text="Mid:"
|
|
Grid.Row="3"
|
|
Margin="0,15,0,15" />
|
|
<xctk:MaterialSlider Grid.Row="3"
|
|
Grid.Column="1"
|
|
Width="120"
|
|
MaterialAccent="Teal"
|
|
Minimum="0"
|
|
Maximum="10"
|
|
VerticalAlignment="Center" />
|
|
<TextBlock Text="Master:"
|
|
Grid.Row="4"
|
|
Margin="0,15,0,15" />
|
|
<xctk:MaterialSlider Grid.Row="4"
|
|
Grid.Column="1"
|
|
Width="120"
|
|
MaterialAccent="Green"
|
|
Minimum="0"
|
|
Maximum="10"
|
|
VerticalAlignment="Center" />
|
|
<TextBlock Text="Equalizer:"
|
|
Grid.Row="5"
|
|
Margin="0,15,0,15" />
|
|
<xctk:MaterialSlider Grid.Row="5"
|
|
Grid.Column="1"
|
|
Width="120"
|
|
MaterialAccent="LightGreen"
|
|
Minimum="0"
|
|
Maximum="10"
|
|
VerticalAlignment="Center" />
|
|
<TextBlock Text="Balance:"
|
|
Grid.Row="6"
|
|
Margin="0,15,0,15" />
|
|
<xctk:MaterialSlider Grid.Row="6"
|
|
Grid.Column="1"
|
|
Width="120"
|
|
MaterialAccent="Lime"
|
|
Minimum="0"
|
|
Maximum="10"
|
|
VerticalAlignment="Center" />
|
|
</Grid>
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Top"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="16">
|
|
<StackPanel Margin="15">
|
|
<TextBlock Text="ToolTips : "/>
|
|
<Grid Margin="0,15,0,0">
|
|
<Image Source="../Resources/italy.4.gif"
|
|
Stretch="Fill"
|
|
Height="328"
|
|
Width="204" />
|
|
<TextBlock Text="Venice"
|
|
Margin="49,50,0,0"
|
|
Tag="{Binding MaterialBrushes[6], RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
|
|
Style="{StaticResource ToolTipTextStyle}">
|
|
<TextBlock.ToolTip>
|
|
<xctk:MaterialToolTip MaterialAccent="LightBlue"
|
|
FontWeight="Light">
|
|
<StackPanel>
|
|
<TextBlock Text="Pop: 270,660" />
|
|
<TextBlock Text="Avg Temp: 13.0°C" />
|
|
</StackPanel>
|
|
</xctk:MaterialToolTip>
|
|
</TextBlock.ToolTip>
|
|
</TextBlock>
|
|
<TextBlock Text="Genoa"
|
|
Margin="15,76,0,0"
|
|
Tag="{Binding MaterialBrushes[7], RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
|
|
Style="{StaticResource ToolTipTextStyle}">
|
|
<TextBlock.ToolTip>
|
|
<xctk:MaterialToolTip MaterialAccent="Cyan"
|
|
FontWeight="Light">
|
|
<StackPanel>
|
|
<TextBlock Text="Pop: 594,904" />
|
|
<TextBlock Text="Avg Temp: 15.7°C" />
|
|
</StackPanel>
|
|
</xctk:MaterialToolTip>
|
|
</TextBlock.ToolTip>
|
|
</TextBlock>
|
|
<TextBlock Text="San Marino"
|
|
Margin="100,92,0,0"
|
|
Tag="{Binding MaterialBrushes[8], RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
|
|
Style="{StaticResource ToolTipTextStyle}">
|
|
<TextBlock.ToolTip>
|
|
<xctk:MaterialToolTip MaterialAccent="Teal"
|
|
FontWeight="Light">
|
|
<StackPanel>
|
|
<TextBlock Text="Pop: 32,576" />
|
|
<TextBlock Text="Avg Temp: 18.1°C" />
|
|
</StackPanel>
|
|
</xctk:MaterialToolTip>
|
|
</TextBlock.ToolTip>
|
|
</TextBlock>
|
|
<TextBlock Text="Florence"
|
|
Margin="58,113,0,0"
|
|
Tag="{Binding MaterialBrushes[9], RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
|
|
Style="{StaticResource ToolTipTextStyle}">
|
|
<TextBlock.ToolTip>
|
|
<xctk:MaterialToolTip MaterialAccent="Green"
|
|
FontWeight="Light">
|
|
<StackPanel>
|
|
<TextBlock Text="Pop: 379,180" />
|
|
<TextBlock Text="Avg Temp: 14.9°C" />
|
|
</StackPanel>
|
|
</xctk:MaterialToolTip>
|
|
</TextBlock.ToolTip>
|
|
</TextBlock>
|
|
<TextBlock Text="Rome"
|
|
Margin="62,167,0,0"
|
|
Tag="{Binding MaterialBrushes[15], RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
|
|
Style="{StaticResource ToolTipTextStyle}">
|
|
<TextBlock.ToolTip>
|
|
<xctk:MaterialToolTip MaterialAccent="DeepOrange"
|
|
FontWeight="Light">
|
|
<StackPanel>
|
|
<TextBlock Text="Pop: 4,321,244" />
|
|
<TextBlock Text="Avg Temp: 20.4°C" />
|
|
</StackPanel>
|
|
</xctk:MaterialToolTip>
|
|
</TextBlock.ToolTip>
|
|
</TextBlock>
|
|
<TextBlock Text="Brindisi"
|
|
Margin="149,180,0,0"
|
|
Tag="{Binding MaterialBrushes[16], RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
|
|
Style="{StaticResource ToolTipTextStyle}">
|
|
<TextBlock.ToolTip>
|
|
<xctk:MaterialToolTip MaterialAccent="Brown"
|
|
FontWeight="Light">
|
|
<StackPanel>
|
|
<TextBlock Text="Pop: 89,846" />
|
|
<TextBlock Text="Avg Temp: 17.2°C" />
|
|
</StackPanel>
|
|
</xctk:MaterialToolTip>
|
|
</TextBlock.ToolTip>
|
|
</TextBlock>
|
|
<TextBlock Text="Palermo"
|
|
Margin="72,237,0,0"
|
|
Tag="{Binding MaterialBrushes[18], RelativeSource={RelativeSource AncestorType={x:Type local:MaterialDemoView}}}"
|
|
Style="{StaticResource ToolTipTextStyle}">
|
|
<TextBlock.ToolTip>
|
|
<xctk:MaterialToolTip MaterialAccent="BlueGray"
|
|
FontWeight="Light">
|
|
<StackPanel>
|
|
<TextBlock Text="Pop: 1,200,000" />
|
|
<TextBlock Text="Avg Temp: 18.5°C" />
|
|
</StackPanel>
|
|
</xctk:MaterialToolTip>
|
|
</TextBlock.ToolTip>
|
|
</TextBlock>
|
|
</Grid>
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
</StackPanel>
|
|
</xctk:MaterialTabItem>
|
|
<xctk:MaterialTabItem Header="Controls Page 4"
|
|
Padding="20"
|
|
FontSize="12">
|
|
<StackPanel Orientation="Horizontal"
|
|
HorizontalAlignment="Center">
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Top"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="16">
|
|
<StackPanel Margin="20">
|
|
<TextBlock Text="ProgressBars : " />
|
|
<TextBlock Text="(Click to animate progressBars)"
|
|
Foreground="Black"
|
|
FontSize="11" />
|
|
|
|
<Grid Margin="0,15,0,10">
|
|
<xctk:MaterialProgressBar x:Name="firstMaterialProgressBar"
|
|
Width="160"
|
|
MaterialAccent="Blue"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Height="20"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=firstMaterialProgressBar, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Grid>
|
|
<Grid Margin="0,10,0,10">
|
|
<xctk:MaterialProgressBar x:Name="secondMaterialProgressBar"
|
|
Width="160"
|
|
MaterialAccent="LightBlue"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Height="20"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=secondMaterialProgressBar, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
<Grid Margin="0,10,0,10">
|
|
<xctk:MaterialProgressBar x:Name="thirdMaterialProgressBar"
|
|
Width="160"
|
|
MaterialAccent="Cyan"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Height="20"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=thirdMaterialProgressBar, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
<Grid Margin="0,10,0,10">
|
|
<xctk:MaterialProgressBar x:Name="fourthMaterialProgressBar"
|
|
Width="160"
|
|
MaterialAccent="Teal"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Height="20"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=fourthMaterialProgressBar, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
<Grid Margin="0,10,0,10">
|
|
<xctk:MaterialProgressBar x:Name="fifthMaterialProgressBar"
|
|
Width="160"
|
|
MaterialAccent="Green"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Height="20"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=fifthMaterialProgressBar, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
<Grid Margin="0,10,0,10">
|
|
<xctk:MaterialProgressBar x:Name="sixthMaterialProgressBar"
|
|
Width="160"
|
|
MaterialAccent="LightGreen"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Height="20"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=sixthMaterialProgressBar, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
<Grid Margin="0,10,0,10">
|
|
<xctk:MaterialProgressBar x:Name="seventhMaterialProgressBar"
|
|
Width="160"
|
|
MaterialAccent="Lime"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Height="20"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=seventhMaterialProgressBar, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Top"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="16">
|
|
<StackPanel Margin="20">
|
|
<TextBlock Text="Circular ProgressBars : " />
|
|
<TextBlock Text="(Click to animate progressBars)"
|
|
Foreground="Black"
|
|
FontSize="11"/>
|
|
|
|
<Grid Margin="0,15,0,6">
|
|
<xctk:MaterialProgressBarCircular x:Name="firstMaterialProgressBarCircular"
|
|
Width="75"
|
|
Height="75"
|
|
MaterialAccent="Blue"
|
|
Background="LightGray"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Thickness="15"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=firstMaterialProgressBarCircular, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
<Grid Margin="0,6,0,6">
|
|
<xctk:MaterialProgressBarCircular x:Name="secondMaterialProgressBarCircular"
|
|
Width="75"
|
|
Height="75"
|
|
Background="LightGray"
|
|
MaterialAccent="LightBlue"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Thickness="15"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=secondMaterialProgressBarCircular, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
<Grid Margin="0,6,0,6">
|
|
<xctk:MaterialProgressBarCircular x:Name="thirdMaterialProgressBarCircular"
|
|
Width="75"
|
|
Height="75"
|
|
Background="LightGray"
|
|
MaterialAccent="Cyan"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Thickness="15"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=thirdMaterialProgressBarCircular, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
<Grid Margin="0,6,0,6">
|
|
<xctk:MaterialProgressBarCircular x:Name="fourthMaterialProgressBarCircular"
|
|
Width="75"
|
|
Height="75"
|
|
Background="LightGray"
|
|
MaterialAccent="Teal"
|
|
Minimum="0"
|
|
Maximum="100"
|
|
Thickness="15"
|
|
MouseLeftButtonDown="MaterialProgressBar_MouseLeftButtonDown" />
|
|
<TextBlock Text="{Binding Value, ElementName=fourthMaterialProgressBarCircular, StringFormat={}{0:N0}%}"
|
|
Foreground="Black"
|
|
IsHitTestVisible="False"
|
|
VerticalAlignment="Center"
|
|
HorizontalAlignment="Center" />
|
|
</Grid>
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Top"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="16">
|
|
<StackPanel Margin="20">
|
|
<TextBlock Text="ListBoxes : " />
|
|
<xctk:MaterialListBox Margin="0,15,0,0"
|
|
MaterialAccent="Blue">
|
|
<xctk:MaterialListBoxItem Content="New York"
|
|
Padding="10,0,10,0"/>
|
|
<xctk:MaterialListBoxItem Content="Tokyo"
|
|
Padding="10,0,10,0"/>
|
|
<xctk:MaterialListBoxItem Content="Paris"
|
|
IsSelected="True"
|
|
Padding="10,0,10,0"/>
|
|
<xctk:MaterialListBoxItem Content="Sydney"
|
|
Padding="10,0,10,0" />
|
|
</xctk:MaterialListBox>
|
|
<xctk:MaterialListBox Margin="0,15,0,0"
|
|
MaterialAccent="LightBlue">
|
|
<xctk:MaterialListBoxItem Content="Brazil"
|
|
Padding="10,0,10,0"/>
|
|
<xctk:MaterialListBoxItem Content="USA"
|
|
IsSelected="True"
|
|
Padding="10,0,10,0" />
|
|
<xctk:MaterialListBoxItem Content="China"
|
|
Padding="10,0,10,0"/>
|
|
</xctk:MaterialListBox>
|
|
<xctk:MaterialListBox Margin="0,15,0,0"
|
|
MaterialAccent="Cyan">
|
|
<xctk:MaterialListBoxItem Content="English"
|
|
IsSelected="True"
|
|
Padding="10,0,10,0"/>
|
|
<xctk:MaterialListBoxItem Content="French"
|
|
Padding="10,0,10,0"/>
|
|
</xctk:MaterialListBox>
|
|
<xctk:MaterialListBox Margin="0,15,0,0"
|
|
MaterialAccent="Teal">
|
|
<xctk:MaterialListBoxItem Content="Red"
|
|
Padding="10,0,10,0" />
|
|
<xctk:MaterialListBoxItem Content="Green"
|
|
Padding="10,0,10,0" />
|
|
<xctk:MaterialListBoxItem Content="Blue"
|
|
IsSelected="True"
|
|
Padding="10,0,10,0" />
|
|
</xctk:MaterialListBox>
|
|
<xctk:MaterialListBox Margin="0,15,0,0"
|
|
MaterialAccent="Green">
|
|
<xctk:MaterialListBoxItem Content="True"
|
|
IsSelected="True"
|
|
Padding="10,0,10,0" />
|
|
<xctk:MaterialListBoxItem Content="False"
|
|
Padding="10,0,10,0" />
|
|
</xctk:MaterialListBox>
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
</StackPanel>
|
|
</xctk:MaterialTabItem>
|
|
<xctk:MaterialTabItem Header="Controls Page 5"
|
|
x:Name="_materialTabItem5"
|
|
Padding="20"
|
|
FontSize="12" >
|
|
<StackPanel Orientation="Horizontal"
|
|
HorizontalAlignment="Center">
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Stretch"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="16">
|
|
<Grid x:Name="_toastGrid"
|
|
Width="350">
|
|
<TextBlock Text="Toasts : "
|
|
Margin="20"/>
|
|
|
|
<Grid Margin="0,16,0,0"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center">
|
|
<Grid.RowDefinitions>
|
|
<RowDefinition Height="Auto" />
|
|
<RowDefinition Height="*" />
|
|
</Grid.RowDefinitions>
|
|
|
|
<xctk:MaterialButton Content="Pop a toast"
|
|
Click="MaterialToastButton_Click"
|
|
Padding="15"
|
|
HorizontalAlignment="Center"/>
|
|
|
|
<Grid Grid.Row="1"
|
|
Margin="0,25,0,0"
|
|
Width="100"
|
|
Height="100">
|
|
<xctk:MaterialProgressBarCircular x:Name="_toastProgressBarCircular"
|
|
Background="LightGray"
|
|
Thickness="10"
|
|
Minimum="0"
|
|
Maximum="100" />
|
|
<TextBlock Text="Toast
Timer"
|
|
HorizontalAlignment="Center"
|
|
VerticalAlignment="Center"/>
|
|
</Grid>
|
|
</Grid>
|
|
</Grid>
|
|
</xctk:MaterialFrame>
|
|
<xctk:MaterialFrame Z="4"
|
|
VerticalContentAlignment="Top"
|
|
HorizontalContentAlignment="Left"
|
|
Margin="16">
|
|
<StackPanel Orientation="Vertical"
|
|
Margin="20"
|
|
Width="200">
|
|
<TextBlock Text="ComboBoxes : " />
|
|
<xctk:MaterialComboBox Margin="0,36,0,0"
|
|
MaterialAccent="Blue">
|
|
<xctk:MaterialComboBoxItem Content="TV" />
|
|
<xctk:MaterialComboBoxItem Content="Computer"
|
|
IsSelected="True" />
|
|
<xctk:MaterialComboBoxItem Content="Cell phone" />
|
|
<xctk:MaterialComboBoxItem Content="Camera" />
|
|
<xctk:MaterialComboBoxItem Content="Radio" />
|
|
</xctk:MaterialComboBox>
|
|
<xctk:MaterialComboBox Margin="0,36,0,0"
|
|
MaterialAccent="LightBlue">
|
|
<xctk:MaterialComboBoxItem Content="Over 3000$" />
|
|
<xctk:MaterialComboBoxItem Content="From 2000$ - 3000$"
|
|
IsSelected="True" />
|
|
<xctk:MaterialComboBoxItem Content="From 1000$ - 2000$" />
|
|
<xctk:MaterialComboBoxItem Content="From 500$ - 1000$" />
|
|
<xctk:MaterialComboBoxItem Content="Under 500$" />
|
|
</xctk:MaterialComboBox>
|
|
<xctk:MaterialComboBox Margin="0,36,0,0"
|
|
MaterialAccent="Cyan">
|
|
<xctk:MaterialComboBoxItem Content="Sony" />
|
|
<xctk:MaterialComboBoxItem Content="Dell" />
|
|
<xctk:MaterialComboBoxItem Content="Samsung"
|
|
IsSelected="True" />
|
|
<xctk:MaterialComboBoxItem Content="Toshiba" />
|
|
<xctk:MaterialComboBoxItem Content="Sharp" />
|
|
</xctk:MaterialComboBox>
|
|
<xctk:MaterialComboBox Margin="0,36,0,0"
|
|
MaterialAccent="Teal">
|
|
<xctk:MaterialComboBoxItem Content="Over 100kg" />
|
|
<xctk:MaterialComboBoxItem Content="From 50 - 100kg" />
|
|
<xctk:MaterialComboBoxItem Content="From 30 - 50kg"
|
|
IsSelected="True" />
|
|
<xctk:MaterialComboBoxItem Content="From 10 - 30kg" />
|
|
<xctk:MaterialComboBoxItem Content="Under 10kg" />
|
|
</xctk:MaterialComboBox>
|
|
<xctk:MaterialComboBox Margin="0,36,0,0"
|
|
MaterialAccent="Green">
|
|
<xctk:MaterialComboBoxItem Content="Fed Ex" />
|
|
<xctk:MaterialComboBoxItem Content="UPS" />
|
|
<xctk:MaterialComboBoxItem Content="Regular Post"
|
|
IsSelected="True" />
|
|
</xctk:MaterialComboBox>
|
|
</StackPanel>
|
|
</xctk:MaterialFrame>
|
|
</StackPanel>
|
|
</xctk:MaterialTabItem>
|
|
</xctk:MaterialTabControl>
|
|
</Grid>
|
|
<!--##END-->
|
|
|
|
<!--##INCLUDE_OPEN_SOURCE
|
|
<Image Source="..\OpenSourceImages\MaterialControls.png" Width="600" Height="400"/>
|
|
##END-->
|
|
</local:MaterialDemoView>
|
|
|