I have a custom control extending the WPF Datagrid. Inside Custom control, the resources and control template of the grid are defined
<DataGrid.Resources>
<local:VisibilityConverter x:Key="visibilityConverter" />
<Style x:Key="ColumnHeaderGripperStyle" TargetType="{x:Type Thumb}">
<Setter Property="Width" Value="8" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Cursor" Value="SizeWE" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Border Padding="{TemplateBinding Padding}" Background="{TemplateBinding Background}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<!--May need Commented if clashes with other Styles-->
<Style TargetType="{x:Type DataGridColumnHeader}" x:Key="DataGridColumnHeaderStyle">
<Setter Property="Foreground" Value="#FF000000" />
<Setter Property="HorizontalContentAlignment" Value="Left" />
<Setter Property="VerticalContentAlignment" Value="Center" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="SeparatorBrush" Value="#FFC9CACA" />
<Setter Property="Padding" Value="4" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="DataGridColumnHeader">
<Grid x:Name="Root" Height="48">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="26" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FF448DCA" />
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" Duration="0" To="#7FFFFFFF" />
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" Duration="0" To="#CCFFFFFF" />
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" Duration="0" To="#F2FFFFFF" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BackgroundRectangle" Storyboard.TargetProperty="(Fill).Color" Duration="0" To="#FF448DCA" />
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[0].Color" Duration="0" To="#D8FFFFFF" />
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[1].Color" Duration="0" To="#C6FFFFFF" />
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[2].Color" Duration="0" To="#8CFFFFFF" />
<ColorAnimation Storyboard.TargetName="BackgroundGradient" Storyboard.TargetProperty="(Fill).(GradientStops)[3].Color" Duration="0" To="#3FFFFFFF" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SortStates">
<VisualState x:Name="Unsorted" />
<VisualState x:Name="SortAscending">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
</Storyboard>
</VisualState>
<VisualState x:Name="SortDescending">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="Opacity" Duration="0" To="1.0" />
<DoubleAnimation Storyboard.TargetName="SortIcon" Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="0" To="-.9" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="BackgroundRectangle" Grid.ColumnSpan="2" Fill="#FF1F3B53" Stretch="Fill" />
<Rectangle x:Name="BackgroundGradient" Grid.ColumnSpan="2" Stretch="Fill">
<Rectangle.Fill>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FCFFFFFF" Offset="0.015" />
<GradientStop Color="#F7FFFFFF" Offset="0.375" />
<GradientStop Color="#E5FFFFFF" Offset="0.6" />
<GradientStop Color="#D1FFFFFF" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Grid Grid.ColumnSpan="2" Margin="0,0,1,1">
<Border Margin="0,0,0,-1" Width="14" BorderBrush="#FF878787" BorderThickness="1,0,0,0" HorizontalAlignment="Right" Visibility="Collapsed">
<Path x:Name="DropDownIndicator" Height="5.26" Margin="0,2,0,0" Width="6.334" Data="F1 M-3.0081699E-07,0.010437 L4.0493598,6.9732699 L8.0546999,0 L-3.0081699E-07,0.010437 z" Fill="#FF444444" HorizontalAlignment="Center" RenderTransformOrigin=".5,.5" Stretch="Uniform" UseLayoutRounding="False" VerticalAlignment="Center">
<Path.RenderTransform>
<ScaleTransform ScaleX=".9" ScaleY=".9" />
</Path.RenderTransform>
</Path>
</Border>
</Grid>
<Grid Margin="4,2,9,2" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<local:ColumnOptionControl Height="13" Width="13" />
<!--Visibility="{Binding Path=CanUserGroup, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Converter={StaticResource visibilityConverter}}" />-->
<ContentPresenter Grid.Column="1" Content="{TemplateBinding Content}" />
<Path x:Name="SortIcon" Grid.Column="2" Margin="4,0,0,0" Width="8" Data="F1 M -5.215,6.099L 5.215,6.099L 0,0L -5.215,6.099 Z " Fill="#FF444444" HorizontalAlignment="Right" Opacity="0" RenderTransformOrigin=".5,.5" Stretch="Uniform" VerticalAlignment="Center">
<Path.RenderTransform>
<ScaleTransform ScaleX=".9" ScaleY=".9" />
</Path.RenderTransform>
</Path>
</Grid>
<Rectangle x:Name="VerticalSeparator" Grid.Column="1" Width="1" Fill="{TemplateBinding SeparatorBrush}" VerticalAlignment="Stretch" /> <!--Visibility="{TemplateBinding SeparatorVisibility}" />-->
<Border Grid.ColumnSpan="2" Grid.Row="1" Margin="0" BorderBrush="#FFC9CACA" BorderThickness="0,1,1,0" Visibility="{Binding Path=CanUserFilter, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Converter={StaticResource visibilityConverter}}">
<local:ColumnFilterControl Margin="0,0,0,1"/> <!--FilterVisibility="{Binding Path=CanUserFilter, RelativeSource={RelativeSource AncestorType={x:Type DataGrid}}, Converter={StaticResource visibilityConverter}}" />-->
</Border>
<Thumb Style="{StaticResource ColumnHeaderGripperStyle}" x:Name="PART_LeftHeaderGripper" HorizontalAlignment="Left" />
<Thumb Style="{StaticResource ColumnHeaderGripperStyle}" x:Name="PART_RightHeaderGripper" HorizontalAlignment="Right" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DataGrid.Resources>
And the VisibilityConverter defined as
[ValueConversion(typeof(Visibility), typeof(bool))]
class VisibilityConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
bool? val = value as bool?;
if (val == null) val = false;
Visibility visible = (val == false ? Visibility.Collapsed : Visibility.Visible);
return visible;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
Visibility? visible = value as Visibility?;
if (visible == null) visible = Visibility.Collapsed;
bool val = (visible == Visibility.Collapsed || visible == Visibility.Hidden ? false : true);
return val;
}
}
In the usage of the control, when I attempt to declare a resources like below, run time exception is thrown at the below declaration as
'Set property 'System.Windows.ResourceDictionary.DeferrableContent' threw an exception.' Line number '368' and line position '30'.
with the inner exception
{"Cannot re-initialize ResourceDictionary instance."}
<local:EnhancedWPFDataGrid.Resources>
<Style TargetType="{x:Type DataGridCell}">
<EventSetter Event="PreviewMouseLeftButtonDown" Handler="DataGridCell_PreviewMouseLeftButtonDown"></EventSetter>
</Style>
<uc:Settings x:Key="settings"/>
</local:EnhancedWPFDataGrid.Resources>
If I comment above Resources from the xaml, it works fine.
Could you please shed some lights what is wrong with this?
Thanks in advance.
I think you're trying to redefine the ResourceDictionary that you've created when setting up your custom control. You've already created the resource dictionary for use with the control, and you're then attempting to create it again (hence the re-initialize exception).
You could move your styling for the DataGridCell into the main template (which you wouldn't want to do in your case, because of your EvenSetter, which is presumably instance specific).
A better solution for you may be to define that style in another ResourceDictionary and reference it, or add the Style to the resources for the Window/Page where you're using the custom control (e.g. you could add it to the resources of a parent Grid).
I believe you can also merge resource dictionaries, although I've never tried it:
http://msdn.microsoft.com/en-us/library/aa350178.aspx
Related
I want to keep the ToggleButton status after re-enable the ToggleButton.But It keep turning off.
Here is my ToggleButton when the Ellipse is actived:
When the ToggleLock is turned on:
After unlocking:
It's wrong color.It have to turn to green color.
My code and Style:
<!--EllipseToggleButton Style-->
<Style TargetType="ToggleButton"
x:Key="EllipseToggleButton">
<Setter Property="Margin"
Value="20 10 0 10" />
<Setter Property="Height"
Value="30" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Name="contain">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Storyboard.TargetName="icon"
Storyboard.TargetProperty="(Path.Fill).(Color)"
To="#3D727272"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation x:Name="IconCheckedColorAni"
Storyboard.TargetName="icon" Duration="0"
Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
To="#FF68E80F" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Name="icon"
Height="24"
Width="24"
Stretch="Uniform"
VerticalAlignment="Center"
Cursor="Hand"
Fill="{TemplateBinding Background}" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
MainWindow:
<StackPanel Orientation="Horizontal">
<ToggleButton x:Name="ToggleLock"
Content="Lock"
Width="100"
Margin="20 10 0 10"
VerticalAlignment="Top"
Height="30" />
<ToggleButton Style="{StaticResource EllipseToggleButton}"
IsEnabled="{Binding ElementName=ToggleLock, Path=IsChecked, Converter={StaticResource InBConv}}"
Background="Red" />
</StackPanel>
Converter:
class InvertBoolConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
if (value != null && value is bool)
{
return !(bool)value;
}
return false;
}
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
{
throw new NotImplementedException();
}
}
The ToggleButton does retain its IsChecked value while it is disabled. When it is re-enabled, however, the visuals don't match: When you un-toggle the lock, you activate the CommonStates.Normal visual state group, which, near as I can tell, resets the default value on the Ellipse named icon :
Fill="{TemplateBinding Background}"
...making it red. You'll find you need to click the ellipsis twice in order to make it green again.
Since the ellipsis toggle button doesn't change its IsChecked value, the CheckedStates visual state storyboards aren't invoked.
I haven't found any way to fix this in XAML (tried reordering triggers, writing out all states explicitly and so on), but you can work around it by forcing an IsChecked state change from code-behind:
<StackPanel Orientation="Horizontal">
<ToggleButton x:Name="ToggleLock"
Content="Lock"
Width="100"
Margin="20 10 0 10"
VerticalAlignment="Top"
Height="30"
Checked="OnChecked"
Unchecked="OnChecked" />
<ToggleButton
x:Name="toggleButton"
Style="{StaticResource EllipseToggleButton}"
IsEnabled="{Binding ElementName=ToggleLock, Path=IsChecked, Converter={StaticResource InBConv}}"
Background="Red" />
</StackPanel>
...with the following event handler:
private void OnChecked(object sender, RoutedEventArgs e)
{
bool? isChecked = this.toggleButton.IsChecked;
toggleButton.IsChecked = null;
toggleButton.IsChecked = isChecked;
}
I don't know that this is the best possible solution, but it does work, and may serve as a starting point for further investigation.
I think the source of your problem is using the same element for 2 different VisualStateGroup. As you can see here there is an element named "DisabledVisualElement" to handle "Disabled" VisualState that is separate from the element that handles "CheckStates" VisualStateGroup.
Following that, I added another ellipse named "iconDisabled" to the template that has Opacity="0" and its value changes to "1" in "Disabled" VisualState. Also, I added Opacity="1" to your "icon" and it will change to "0" in "Disabled" VisualState.
Here is your modified style code:
<Style TargetType="ToggleButton"
x:Key="EllipseToggleButton">
<Setter Property="Margin"
Value="20 10 0 10" />
<Setter Property="Height"
Value="30" />
<Setter Property="VerticalAlignment"
Value="Top" />
<Setter Property="IsTabStop"
Value="False" />
<Setter Property="FocusVisualStyle"
Value="{x:Null}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid Name="contain">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="iconDisable"
Storyboard.TargetProperty="Opacity" To="1" />
<DoubleAnimation Duration="0"
Storyboard.TargetName="icon"
Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation x:Name="IconCheckedColorAni"
Storyboard.TargetName="icon" Duration="0"
Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
To="#FF68E80F" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked">
<Storyboard>
<ColorAnimation x:Name="IconUncheckedColorAni"
Storyboard.TargetName="icon" Duration="0"
Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)"
To="Red" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Name="icon"
Height="24"
Width="24"
Opacity="1"
Stretch="Uniform"
VerticalAlignment="Center"
Cursor="Hand"
Fill="{TemplateBinding Background}" />
<Ellipse Name="iconDisable"
Height="24"
Width="24"
Opacity="0"
Stretch="Uniform"
VerticalAlignment="Center"
Cursor="Hand"
Fill="#3D727272" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Other parts of the code are the same as you wrote in question post.
I'm using IsHitTestVisible instead of IsEnabled.
Here is the way I fixed my issue:
<ToggleButton x:Name="ToggleLock"
IsChecked="{Binding OptionLocked}"
Content="Lock"
Width="100"
Margin="20 10 0 10"
VerticalAlignment="Top"
Height="30" />
<ToggleButton x:Name="toggleButton"
IsChecked="{Binding EllipseChecked}"
Style="{StaticResource EllipseToggleButton}"
IsHitTestVisible ="{Binding OptionLocked, Converter={StaticResource InvertBoolConv}}"/>
I having another issue.I can't set background color to Gray when the ToggleLock is turning on.At least it's working.I will accept it if no more answer come in a few days.
I want to say thank Petter Hesselberg and TheSETJ.
Finally I have fixed it.Here is a new ControlTemplate:
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled" />
</VisualStateGroup>
<VisualStateGroup x:Name="CheckedStates">
<VisualState x:Name="Checked">
<Storyboard>
<ColorAnimation x:Name="IconCheckedColorAni"
Storyboard.TargetName="icon"
Duration="0"
Storyboard.TargetProperty="(Path.Fill).(SolidColorBrush.Color)" />
</Storyboard>
</VisualState>
<VisualState x:Name="Unchecked" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse Name="icon"
Height="24"
Width="24"
Stretch="Uniform"
VerticalAlignment="Center"
Cursor="Hand"
Fill="{TemplateBinding Background}"
Visibility="Visible" />
<Ellipse Name="iconDisable"
Height="24"
Width="24"
Stretch="Uniform"
VerticalAlignment="Center"
Cursor="Hand"
IsHitTestVisible="{TemplateBinding IsHitTestVisible}"
Fill="3D727272"
Visibility="Collapsed" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsHitTestVisible">
<Trigger.Value>
<sys:Boolean>False</sys:Boolean>
</Trigger.Value>
<Setter TargetName="iconDisable"
Property="Visibility"
Value="Visible" />
<Setter TargetName="icon"
Property="Visibility"
Value="Collapsed" />
</Trigger>
<Trigger Property="IsHitTestVisible">
<Trigger.Value>
<sys:Boolean>True</sys:Boolean>
</Trigger.Value>
<Setter TargetName="iconDisable"
Property="Visibility"
Value="Collapsed" />
<Setter TargetName="icon"
Property="Visibility"
Value="Visible" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
And MainWindow.xaml:
<ToggleButton x:Name="ToggleLock"
IsChecked="{Binding OptionLocked}"
Content="Lock"
Width="100"
Margin="20 10 0 10"
VerticalAlignment="Top"
Height="30" />
<ToggleButton x:Name="toggleButton"
IsChecked="{Binding EllipseChecked}"
Style="{StaticResource EllipseToggleButton}"
IsHitTestVisible ="{Binding OptionLocked, Converter={StaticResource InvertBoolConv}}"/>
I have tv series project and I am using mediaelement. But I need help for seek bar. How to add this? How to make seek bar slider like MediaPlayerLauncher?
I'm try some thinks like this:
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<MediaElement x:Name="player1" MediaOpened="player1_MediaOpened" CurrentStateChanged="player1_CurrentStateChanged" />
<ListBox x:Name="alternatifliste" FontSize="20" FontStyle="Italic" FontWeight="Bold" Foreground="White" Margin="677,98,10,153" SelectionChanged="alternatifliste_SelectionChanged" />
</Grid>
<Button x:Name="play" Content="play" HorizontalAlignment="Left" Margin="94,336,0,0" Grid.Row="1" VerticalAlignment="Top" Click="play_Click"/>
<Button x:Name="stop" Content="stop" HorizontalAlignment="Left" Margin="331,336,0,0" Grid.Row="1" VerticalAlignment="Top" Click="stop_Click"/>
<Slider Name="timelineSlider" Margin="0,68,0,244" Grid.Row="1" ValueChanged="timelineSlider_ValueChanged" />
</Grid>
My project:
İts code:
private void player1_MediaOpened(object sender, RoutedEventArgs e)
{
TimeSpan ts = player1.NaturalDuration.TimeSpan;
timelineSlider.Maximum = ts.TotalSeconds;
timelineSlider.SmallChange = 1;
timelineSlider.LargeChange = Math.Min(10, ts.Seconds / 10);
}
private void seekBar_DragCompleted(object sender, DragCompletedEventArgs e)
{
player1.Position = TimeSpan.FromSeconds(timelineSlider.Value);
}
private void timelineSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
{
player1.Position = TimeSpan.FromSeconds(timelineSlider.Value);
}
private void player1_CurrentStateChanged(object sender, RoutedEventArgs e)
{
//timelineSlider.Value = player1.Position.Seconds;
}
I want like this:
Just edit the style of the Slider if you wish to look like that one. I made comments on where you need to change.
In App.xaml, it should look something like this.
<Application>
<!--Application Resources-->
<Application.Resources>
<Style x:Key="Chubs_SliderStyle" TargetType="Slider">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="Maximum" Value="10"/>
<Setter Property="Minimum" Value="0"/>
<Setter Property="Value" Value="0"/>
<Setter Property="Background" Value="{StaticResource PhoneChromeBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Slider">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HorizontalTrack"/>
<DoubleAnimation Duration="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="VerticalTrack"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="HorizontalFill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="VerticalFill">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="HorizontalTemplate" Margin="{StaticResource PhoneHorizontalMargin}">
<!-- **** Change the height of these two rectangles to make the slider smaller -->
<Rectangle x:Name="HorizontalTrack" Fill="{TemplateBinding Background}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50"/>
<Rectangle x:Name="HorizontalFill" Fill="{TemplateBinding Foreground}" Height="12" IsHitTestVisible="False" Margin="0,22,0,50">
<Rectangle.Clip>
<RectangleGeometry Rect="0, 0, 6, 12"/>
</Rectangle.Clip>
</Rectangle>
<!-- **** this is the white rectangle thing, change the height and width if you want to make it smaller -->
<Rectangle x:Name="HorizontalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" HorizontalAlignment="Left" Height="24" Margin="0,16,0,44" Width="12">
<Rectangle.RenderTransform>
<TranslateTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
<Grid x:Name="VerticalTemplate" Margin="{StaticResource PhoneVerticalMargin}">
<Rectangle x:Name="VerticalTrack" Fill="{TemplateBinding Background}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12"/>
<Rectangle x:Name="VerticalFill" Fill="{TemplateBinding Foreground}" IsHitTestVisible="False" Margin="18,0,18,0" Width="12">
<Rectangle.Clip>
<RectangleGeometry Rect="0, 0, 12, 6"/>
</Rectangle.Clip>
</Rectangle>
<Rectangle x:Name="VerticalCenterElement" Fill="{StaticResource PhoneForegroundBrush}" Height="12" Margin="12,0,12,0" VerticalAlignment="Top" Width="24">
<Rectangle.RenderTransform>
<TranslateTransform/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Application.Resources>
</Application>
Now you can reference your new style in any xaml file you like.
<Slider Style="{StaticResource Chubs_SliderStyle}"></Slider>
I got this sample code from this forum.
<DatePicker SelectedDate="{Binding myVideModelProperty}"
Height="25" HorizontalAlignment="Left" Margin="81,-2,0,0" Name="myDatePicker" VerticalAlignment="Top" Width="115">
<DatePicker.Resources>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox"
Text="{Binding Path=SelectedDate, RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}, StringFormat={}{0:yyyy/MM/dd}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
But I want the format i.e yyyy/MM/dd to come from an application property called dateformat.
Can you help me put the stringformat as a binding to the application property.
All of the other answers seem a little bit convoluted. It is as simple as:
<DatePicker SelectedDate="{Binding PropertyName, StringFormat=dd/MM/yyyy}"/>
All you need to do is adjust the string format to suit yourself.
Use this snippet for your DatePicker (you will have to style it):
<DatePicker SelectedDate="{Binding myVideModelProperty}">
<DatePicker.Resources>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox"
Text="{Binding Path=SelectedDate,
RelativeSource={RelativeSource AncestorType={x:Type DatePicker}},
StringFormat={x:Static local:App.DateFormat}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
Use this snippet for your App.xaml.cs (change the namespace to something useful):
namespace _24417730
{
public partial class App
{
public static string DateFormat = "yyyy/MM/dd";
}
}
In the xaml control containing your DatePicker, define a XAML namespace like so:
xmlns:local="clr-namespace:_24417730"
Note that you will have to change the namespace to the one you used to define your application class.
Here is how I defined my xaml namespace on the MainWindow.xaml control:
<Window x:Class="_24417730.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:_24417730"
Title="MainWindow" Height="350" Width="525">
<StackPanel>
<DatePicker SelectedDate="{Binding myVideModelProperty}">
<DatePicker.Resources>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox"
Text="{Binding Path=SelectedDate,
RelativeSource={RelativeSource AncestorType={x:Type DatePicker}},
StringFormat={x:Static local:App.DateFormat}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
</StackPanel>
</Window>
Also, reading up on Static Markup Extension and XAML Namespaces may help for future reference.
If you require any further clarifications, I will be happy to assist.
You can use converters for that.
Or you can add another property to your class which will return the formatted date.
With converter
public class DateFormatConverter : IValueConverter
{
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
return string.Format(Application.DateFormat, value);
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
}
}
<Style TargetType="{x:Type DatePicker}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="IsTodayHighlighted" Value="True"/>
<Setter Property="SelectedDateFormat" Value="Short"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="2"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint=".5,0" StartPoint=".5,1">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePicker}">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_DisabledVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="PART_Root" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Grid.Resources>
<SolidColorBrush x:Key="DisabledBrush" Color="#A5FFFFFF"/>
<ControlTemplate x:Key="DropDownButtonTemplate" TargetType="{x:Type Button}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="Pressed"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF448DCA" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background"/>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
<SplineColorKeyFrame KeyTime="0" Value="#7FFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
<SplineColorKeyFrame KeyTime="0" Value="#CCFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
<SplineColorKeyFrame KeyTime="0" Value="#F2FFFFFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="Background">
<SplineColorKeyFrame KeyTime="0" Value="#FF448DCA"/>
</ColorAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="Highlight">
<SplineDoubleKeyFrame KeyTime="0" Value="1"/>
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
<SplineColorKeyFrame KeyTime="0" Value="#EAFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[2].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
<SplineColorKeyFrame KeyTime="0" Value="#C6FFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[3].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
<SplineColorKeyFrame KeyTime="0" Value="#6BFFFFFF"/>
</ColorAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="0" Duration="00:00:00.001" Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[0].(GradientStop.Color)" Storyboard.TargetName="BackgroundGradient">
<SplineColorKeyFrame KeyTime="0" Value="#F4FFFFFF"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="#11FFFFFF" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="18" Margin="0" VerticalAlignment="Center" Width="19">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
<ColumnDefinition Width="20*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="23*"/>
<RowDefinition Height="19*"/>
<RowDefinition Height="19*"/>
<RowDefinition Height="19*"/>
</Grid.RowDefinitions>
<Border x:Name="Highlight" BorderBrush="#FF45D6FA" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius="0,0,1,1" Margin="-1" Opacity="0" Grid.Row="0" Grid.RowSpan="4"/>
<Border x:Name="Background" BorderBrush="#FFFFFFFF" BorderThickness="1" Background="#FF1F3B53" Grid.ColumnSpan="4" CornerRadius=".5" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.RowSpan="3"/>
<Border x:Name="BackgroundGradient" BorderBrush="#BF000000" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius=".5" Margin="0,-1,0,0" Opacity="1" Grid.Row="1" Grid.RowSpan="3">
<Border.Background>
<LinearGradientBrush EndPoint=".7,1" StartPoint=".7,0">
<GradientStop Color="#FFFFFFFF" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</LinearGradientBrush>
</Border.Background>
</Border>
<Rectangle Grid.ColumnSpan="4" Grid.RowSpan="1" StrokeThickness="1">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.3,-1.1" StartPoint="0.46,1.6">
<GradientStop Color="#FF4084BD"/>
<GradientStop Color="#FFAFCFEA" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
<Rectangle.Stroke>
<LinearGradientBrush EndPoint="0.48,-1" StartPoint="0.48,1.25">
<GradientStop Color="#FF494949"/>
<GradientStop Color="#FF9F9F9F" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Stroke>
</Rectangle>
<Path Grid.ColumnSpan="4" Grid.Column="0" Data="M11.426758,8.4305077 L11.749023,8.4305077 L11.749023,16.331387 L10.674805,16.331387 L10.674805,10.299648 L9.0742188,11.298672 L9.0742188,10.294277 C9.4788408,10.090176 9.9094238,9.8090878 10.365967,9.4510155 C10.82251,9.0929432 11.176106,8.7527733 11.426758,8.4305077 z M14.65086,8.4305077 L18.566387,8.4305077 L18.566387,9.3435936 L15.671368,9.3435936 L15.671368,11.255703 C15.936341,11.058764 16.27293,10.960293 16.681133,10.960293 C17.411602,10.960293 17.969301,11.178717 18.354229,11.615566 C18.739157,12.052416 18.931622,12.673672 18.931622,13.479336 C18.931622,15.452317 18.052553,16.438808 16.294415,16.438808 C15.560365,16.438808 14.951641,16.234707 14.468243,15.826504 L14.881817,14.929531 C15.368796,15.326992 15.837872,15.525723 16.289043,15.525723 C17.298809,15.525723 17.803692,14.895514 17.803692,13.635098 C17.803692,12.460618 17.305971,11.873379 16.310528,11.873379 C15.83071,11.873379 15.399232,12.079271 15.016094,12.491055 L14.65086,12.238613 z" Fill="#FF2F2F2F" HorizontalAlignment="Center" Margin="4,3,4,3" Grid.Row="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" Stretch="Fill" VerticalAlignment="Center"/>
<Ellipse Grid.ColumnSpan="4" Fill="#FFFFFFFF" HorizontalAlignment="Center" Height="3" StrokeThickness="0" VerticalAlignment="Center" Width="3"/>
<Border x:Name="DisabledVisual" BorderBrush="#B2FFFFFF" BorderThickness="1" Grid.ColumnSpan="4" CornerRadius="0,0,.5,.5" Opacity="0" Grid.Row="0" Grid.RowSpan="4"/>
</Grid>
</Grid>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="PART_Button" Grid.Column="1" Foreground="{TemplateBinding Foreground}" Focusable="False" HorizontalAlignment="Left" Margin="3,0,3,0" Grid.Row="0" Template="{StaticResource DropDownButtonTemplate}" VerticalAlignment="Top" Width="20"/>
<DatePickerTextBox x:Name="PART_TextBox" Grid.Column="0" Focusable="{TemplateBinding Focusable}" HorizontalContentAlignment="Stretch" Grid.Row="0" VerticalContentAlignment="Stretch" Text="{Binding SelectedDate,RelativeSource={RelativeSource TemplatedParent},StringFormat='dd/MM/yyyy'}" />
<Grid x:Name="PART_DisabledVisual" Grid.ColumnSpan="2" Grid.Column="0" IsHitTestVisible="False" Opacity="0" Grid.Row="0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Fill="#A5FFFFFF" RadiusY="1" Grid.Row="0" RadiusX="1"/>
<Rectangle Grid.Column="1" Fill="#A5FFFFFF" Height="18" Margin="3,0,3,0" RadiusY="1" Grid.Row="0" RadiusX="1" Width="19"/>
<Popup x:Name="PART_Popup" AllowsTransparency="True" Placement="Bottom" PlacementTarget="{Binding ElementName=PART_TextBox}" StaysOpen="False"/>
</Grid>
</Grid>
</Border>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Source={x:Static SystemParameters.HighContrast}}" Value="false">
<Setter Property="Foreground" TargetName="PART_TextBox" Value="{Binding Foreground, RelativeSource={RelativeSource TemplatedParent}}"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Add a Style for DatePickerTextBox like this, no CultureInfo required, make the format you want with StringFormat:
<DatePicker SelectedDate="{Binding myProperty}">
<DatePicker.Resources>
<Style TargetType="{x:Type DatePickerTextBox}">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<TextBox x:Name="PART_TextBox" Text="{Binding Path=SelectedDate, StringFormat='dd MMMM yyyy', RelativeSource={RelativeSource AncestorType={x:Type DatePicker}}}" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
Most of the time, when you want to change date format, it's usually because your had the wrong culture.
Set the current thread culture correctly :
Thread.CurrentThread.CurrentCulture = CultureInfo.CreateSpecificCulture("fr-FR");
After that, if the culture format is still not ok for you, you can change it via ShortDatePattern and LongDatePattern properties of CulureInfo.
ci.DateTimeFormat.ShortDatePattern = "dd/MM/yyyy"; //where ci a CultureInfo object
Finally you can tell DatePicker to prefer Short or Long format via SelectedDateFormat property.
I want to custom my own calendar style. I have searched on internet and I have got the following example:
<Style x:Key="PlaybackCalendarItemStyle" TargetType="primitives:CalendarItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:CalendarItem">
<ControlTemplate.Resources>
<!-- Start: Data template for header button -->
<DataTemplate x:Key="DayTitleTemplate">
<TextBlock
FontWeight="Bold"
FontFamily="Verdana"
FontSize="9.5"
Foreground="#FF333333"
HorizontalAlignment="Center"
Text="{Binding}"
Margin="0,6,0,6"
VerticalAlignment="Center"/>
</DataTemplate>
<!-- End: Data template for header button -->
</ControlTemplate.Resources>
<Grid Name="PART_Root" >
<Grid.Resources>
<SolidColorBrush x:Key="DisabledColor" Color="#A5FFFFFF" />
</Grid.Resources>
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="1">
<!-- This Brush is new -->
<Border.Background>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Offset="0" Color="#FFFFC0" />
<GradientStop Offset="0.5" Color="#FFE0B0" />
<GradientStop Offset="1" Color="#FFD0A8" />
</LinearGradientBrush>
</Border.Background>
<Border CornerRadius="1" BorderBrush="#FFFFFFFF" BorderThickness="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<!-- Start: Previous button template -->
<ControlTemplate x:Key="PreviousButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Margin="14,-6,0,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Fill" Data="M288.75,232.25 L288.75,240.625 L283,236.625 z">
<Path.Fill>
<SolidColorBrush x:Name="TextColor" Color="#FF333333" />
</Path.Fill>
</Path>
</Grid>
</Grid>
</ControlTemplate>
<!-- End: Previous button template -->
<!-- Start: Next button template -->
<ControlTemplate x:Key="NextButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Margin="0,-6,14,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Right" Stretch="Fill" Data="M282.875,231.875 L282.875,240.375 L288.625,236 z">
<Path.Fill>
<SolidColorBrush x:Name="TextColor" Color="#FF333333" />
</Path.Fill>
</Path>
</Grid>
</Grid>
</ControlTemplate>
<!-- End: Next button template -->
<!-- Start: Header button template -->
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="Button">
<Grid Cursor="Hand">
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="buttonContent" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<!-- This Border is new -->
<Border Padding="12 0"
CornerRadius="6">
<Border.Background>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Offset="0" Color="#FFC4A0" />
<GradientStop Offset="1" Color="#FF9450" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
x:Name="buttonContent"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="1,4,1,9"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextElement.Foreground>
<SolidColorBrush x:Name="TextColor" Color="#FF333333"/>
</TextElement.Foreground>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
<!-- End: Header button template -->
</Grid.Resources>
<!-- Start: Previous button content -->
<Button x:Name="PART_PreviousButton"
Grid.Row="0" Grid.Column="0"
Template="{StaticResource PreviousButtonTemplate}"
Height="20" Width="28"
HorizontalAlignment="Left"
Focusable="False"
/>
<!-- End: Previous button content -->
<!-- Start: Header button content -->
<Button x:Name="PART_HeaderButton"
Grid.Row="0" Grid.Column="1"
Template="{StaticResource HeaderButtonTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" FontSize="10.5"
Focusable="False"
/>
<!-- End: Header button content -->
<!-- Start: Next button content -->
<Button x:Name="PART_NextButton"
Grid.Row="0" Grid.Column="2"
Height="20" Width="28"
HorizontalAlignment="Right"
Template="{StaticResource NextButtonTemplate}"
Focusable="False"
/>
<!-- End: Next button content -->
<!-- Start: Month Content Grid -->
<Grid x:Name="PART_MonthView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Visible" Margin="6,-1,6,6">
<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>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>
<!-- End: Month Content Grid -->
<!-- End: Year Content Grid -->
<Grid x:Name="PART_YearView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Hidden" Margin="6,-3,7,6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>
<!-- End: Year Content Grid -->
</Grid>
</Border>
</Border>
<Rectangle x:Name="PART_DisabledVisual" Opacity="0" Visibility="Collapsed" Stretch="Fill" StrokeThickness="1" RadiusX="2" RadiusY="2" Stroke="{StaticResource DisabledColor}" Fill="{StaticResource DisabledColor}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
</Trigger>
<DataTrigger Value="Year">
<DataTrigger.Binding>
<Binding Path="DisplayMode">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor" AncestorType="{x:Type toolkit:Calendar}" />
</Binding.RelativeSource>
</Binding>
</DataTrigger.Binding>
<Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
<Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
</DataTrigger>
<DataTrigger Value="Decade">
<DataTrigger.Binding>
<Binding Path="DisplayMode">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor" AncestorType="{x:Type toolkit:Calendar}" />
</Binding.RelativeSource>
</Binding>
</DataTrigger.Binding>
<Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
<Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The result of this example is the following image
But I want to custom the calendar become my own style as the following image
I have tried but I don't know how to do it, so someone can show me the way to to it?
Many thanks!
T&T
The above example has more the following styles:
<Style x:Key="PlaybackCalendarDayButton" TargetType="primitives:CalendarDayButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:CalendarDayButton">
<!-- This is new -->
<ControlTemplate.Resources>
<src:PlaybackCalendarConverter x:Key="conv" />
<src:PlaybackCalendarIsNotNullConverter x:Key="isNotNullConverter" />
</ControlTemplate.Resources>
<Grid ToolTip="{Binding Converter={StaticResource conv},
Mode=OneWay}">
<!-- Resume the copy -->
<vsm:VisualStateManager.VisualStateGroups>
<vsm:VisualStateGroup x:Name="CommonStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0:0:0.1" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Normal" />
<vsm:VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Background" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
<DoubleAnimation Storyboard.TargetName="NormalText" Storyboard.TargetProperty="Opacity" To=".35" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="SelectionStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Unselected" />
<vsm:VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="SelectedBackground" Storyboard.TargetProperty="Opacity" To=".75" Duration="0" />
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="CalendarButtonFocusStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="CalendarButtonFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DayButtonFocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
<vsm:VisualState x:Name="CalendarButtonUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="DayButtonFocusVisual" Storyboard.TargetProperty="Visibility" Duration="0">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="ActiveStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="Active" />
<vsm:VisualState x:Name="Inactive">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="selectedText" Storyboard.TargetProperty="Color" To="#FF777777"></ColorAnimation>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="DayStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="RegularDay" />
<vsm:VisualState x:Name="Today">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TodayBackground" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
<ColorAnimation Duration="0" Storyboard.TargetName="selectedText" Storyboard.TargetProperty="Color" To="#FFFFFFFF"></ColorAnimation>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
<vsm:VisualStateGroup x:Name="BlackoutDayStates">
<vsm:VisualStateGroup.Transitions>
<vsm:VisualTransition GeneratedDuration="0" />
</vsm:VisualStateGroup.Transitions>
<vsm:VisualState x:Name="NormalDay" />
<vsm:VisualState x:Name="BlackoutDay">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Blackout" Storyboard.TargetProperty="Opacity" To=".2"/>
</Storyboard>
</vsm:VisualState>
</vsm:VisualStateGroup>
</vsm:VisualStateManager.VisualStateGroups>
<Rectangle x:Name="TodayBackground" RadiusX="1" RadiusY="1" Opacity="0" Fill="#FFAAAAAA"/>
<Rectangle x:Name="SelectedBackground" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}"/>
<Rectangle x:Name="Background" RadiusX="1" RadiusY="1" Opacity="0" Fill="{TemplateBinding Background}"/>
<ContentPresenter
x:Name="NormalText"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="5,1,5,1"
>
<TextElement.Foreground>
<SolidColorBrush x:Name="selectedText" Color="#FF333333"/>
</TextElement.Foreground>
</ContentPresenter>
<Path x:Name="Blackout" Opacity="0" Margin="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.5" Fill="#FF000000" Stretch="Fill" Data="M8.1772461,11.029181 L10.433105,11.029181 L11.700684,12.801641 L12.973633,11.029181 L15.191895,11.029181 L12.844727,13.999395 L15.21875,17.060919 L12.962891,17.060919 L11.673828,15.256231 L10.352539,17.060919 L8.1396484,17.060919 L10.519043,14.042364 z"/>
<Rectangle x:Name="DayButtonFocusVisual" Visibility="Collapsed" IsHitTestVisible="false" RadiusX="1" RadiusY="1" Stroke="#FF45D6FA"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True">
<Setter TargetName="DayButtonFocusVisual" Property="Visibility" Value="Visible" />
</Trigger>
<DataTrigger Binding="{Binding Converter={StaticResource isNotNullConverter}}" Value="{x:Null}">
<Setter TargetName="NormalText" Property="TextElement.Foreground" Value="Red"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I must post it here because the question is limited by 30,000 characters.
Thanks!
Have you looked at : http://www.functionx.com/vcsharp/controls/monthcalendar.htm ?
Mainly:
Under the line separator, the numeric days of the month are listed. By default, the numeric days of the control display above a white background which is the Window system color. This color is controlled by the overridden BackColor property.
and
The Font Color of the Days of the Current Month
The numbers of the days of the month display in two colors. The real days of the selected month display, by default, in a black color as the WindowText system color. The color of these days is controlled by the overridden ForeColor property.
I apologize in advance if this is already out there (I did an advanced search and couldn't find this specific issue.)
I'm using a custom WPF Datepicker calendar template (Just changing colors really), but now my buttons don't work. It will pop up the calendar, but nothing works from that point, Am i missing anything? Here's the code below:
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:Controls="clr-namespace:Microsoft.Windows.Controls;assembly=WPFToolkit"
xmlns:primitives="clr-namespace:Microsoft.Windows.Controls.Primitives;assembly=WPFToolkit" >
<Style x:Key="CalendarStyle1" TargetType="{x:Type Calendar}">
<Setter Property="Foreground" Value="#FF333333"/>
<Setter Property="Background">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFE4EAF0" Offset="0"/>
<GradientStop Color="#FFECF0F4" Offset="0.16"/>
<GradientStop Color="#FFFCFCFD" Offset="0.16"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Calendar}">
<StackPanel x:Name="PART_Root" HorizontalAlignment="Center">
<primitives:CalendarItem x:Name="PART_CalendarItem" Style="{DynamicResource CalenderStyleNew}" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}"/>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="CalenderStyleNew"
TargetType="primitives:CalendarItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="primitives:CalendarItem">
<ControlTemplate.Resources>
<!-- Start: Data template for header button -->
<DataTemplate x:Key="DayTitleTemplate">
<TextBlock
FontWeight="Bold"
FontFamily="Verdana"
FontSize="9.5"
Foreground="Black"
HorizontalAlignment="Center"
Text="{Binding}"
Margin="0,6,0,6"
VerticalAlignment="Center"/>
</DataTemplate>
<!-- End: Data template for header button -->
<DataTemplate x:Key="MonthTitleTemplate">
<TextBlock
FontWeight="Medium"
FontFamily="Verdana"
FontSize="9.5"
Foreground="Red"
HorizontalAlignment="Center"
Text="{Binding}"
Margin="0,10,0,6"
VerticalAlignment="Center"/>
</DataTemplate>
</ControlTemplate.Resources>
<Grid Name="PART_Root" >
<Grid.Resources>
<SolidColorBrush x:Key="DisabledColor" Color="#A5FFFFFF" />
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="PART_DisabledVisual" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="1">
<!-- This Brush is new -->
<Border.Background>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Offset="0" Color="#FFE4EAF0" />
<GradientStop Offset="0.5" Color="#FFECF0F4" />
<GradientStop Offset="1" Color="#FFECF0F4" />
</LinearGradientBrush>
</Border.Background>
<Border CornerRadius="1" BorderBrush="#FFFFFFFF" BorderThickness="2">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.Resources>
<!-- Start: Previous button template -->
<ControlTemplate x:Key="PreviousButtonTemplate" TargetType="{ x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Margin="14,-6,0,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Left" Stretch="Fill" Data="M288.75,232.25 L288.75,240.625 L283,236.625 z">
<Path.Fill>
<SolidColorBrush x:Name="TextColor" Color="#FF333333" />
</Path.Fill>
</Path>
</Grid>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="NextButtonTemplate" TargetType="{ x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="#FF73A9D8" Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle Fill="#11E5EBF1" Stretch="Fill" Opacity="1"/>
<Grid>
<Path Margin="0,-6,14,0" Height="10" Width="6" VerticalAlignment="Center" HorizontalAlignment="Right" Stretch="Fill" Data="M282.875,231.875 L282.875,240.375 L288.625,236 z">
<Path.Fill>
<SolidColorBrush x:Name="TextColor" Color="#FF333333" />
</Path.Fill>
</Path>
</Grid>
</Grid>
</ControlTemplate>
<!-- End: Next button template -->
<!-- Start: Header button template -->
<ControlTemplate x:Key="HeaderButtonTemplate" TargetType="{ x:Type Button}">
<Grid Cursor="Hand">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Storyboard.TargetName="TextColor" Storyboard.TargetProperty="Color" To="Blue" Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="buttonContent" Storyboard.TargetProperty="Opacity" To=".5" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- This Border is new -->
<Border Padding="12 0"
CornerRadius="6">
<Border.Background>
<LinearGradientBrush StartPoint="0 0" EndPoint="0 1">
<GradientStop Offset="0" Color="#FF73A9D8" />
<GradientStop Offset="1" Color="#FF73A9E8" />
</LinearGradientBrush>
</Border.Background>
<ContentPresenter
x:Name="buttonContent"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Margin="1,4,1,9"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<TextElement.Foreground>
<SolidColorBrush x:Name="TextColor" Color="#FF333333"/>
</TextElement.Foreground>
</ContentPresenter>
</Border>
</Grid>
</ControlTemplate>
<!-- End: Header button template -->
</Grid.Resources>
<!-- Start: Previous button content -->
<Button x:Name="PART_PreviousButton"
Grid.Row="0" Grid.Column="0"
Template="{StaticResource PreviousButtonTemplate}"
Height="20" Width="28"
HorizontalAlignment="Left"
Focusable="False"
/>
<!-- End: Previous button content -->
<!-- Start: Header button content -->
<Button x:Name="PART_HeaderButton"
Grid.Row="0" Grid.Column="1"
Template="{StaticResource HeaderButtonTemplate}"
HorizontalAlignment="Center" VerticalAlignment="Center"
Height="28" Width="110"
FontWeight="Bold" FontSize="10.5"
Focusable="False"
/>
<!-- End: Header button content -->
<!-- Start: Next button content -->
<Button x:Name="PART_NextButton"
Grid.Row="0" Grid.Column="2"
Height="20" Width="28"
HorizontalAlignment="Right"
Template="{StaticResource NextButtonTemplate}"
Focusable="False"
/>
<!-- End: Next button content -->
<!-- Start: Month Content Grid -->
<Grid x:Name="PART_MonthView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Visible" Margin="6,-1,6,6">
<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>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>
<!-- End: Month Content Grid -->
<!-- End: Year Content Grid -->
<Grid x:Name="PART_YearView" Grid.Row="1" Grid.ColumnSpan="3" Visibility="Hidden" Margin="6,-3,7,6">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
</Grid>
<!-- End: Year Content Grid -->
</Grid>
</Border>
</Border>
<Rectangle x:Name="PART_DisabledVisual" Opacity="0" Visibility="Collapsed" Stretch="Fill" StrokeThickness="1" RadiusX="2" RadiusY="2" Stroke="{StaticResource DisabledColor}" Fill="{StaticResource DisabledColor}"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="PART_DisabledVisual" Property="Visibility" Value="Visible" />
</Trigger>
<DataTrigger Value="Year">
<DataTrigger.Binding>
<Binding Path="DisplayMode">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor" AncestorType="{x:Type Controls:Calendar}" />
</Binding.RelativeSource>
</Binding>
</DataTrigger.Binding>
<Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
<Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
</DataTrigger>
<DataTrigger Value="Decade">
<DataTrigger.Binding>
<Binding Path="DisplayMode">
<Binding.RelativeSource>
<RelativeSource Mode="FindAncestor" AncestorType="{x:Type Controls:Calendar}" />
</Binding.RelativeSource>
</Binding>
</DataTrigger.Binding>
<Setter TargetName="PART_MonthView" Property="Visibility" Value="Hidden" />
<Setter TargetName="PART_YearView" Property="Visibility" Value="Visible" />
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Note: I've got this resource dictionary set at an application level and I'm globally binding the calendarstyle properties to all datepickers.
This is in an app level resource dictionary:
<Style TargetType="{x:Type DatePicker}">
<Setter
Property="CalendarStyle"
Value="{StaticResource CalendarStyle1}" />
</Style>
And this is where the resource dictionaries are referenced (In case I did it wrong, I'm new to xaml
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary
Source="ResourceDictionary/CustomCalendar.xaml" />
<ResourceDictionary
Source="ResourceDictionary/GlobalStyles.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
Your problem is with your style TargetTypes. If you notice you have the style for your calendar defined as:
<Style x:Key="CalendarStyle1" TargetType="{x:Type Calendar}">
And the style for your CalendarItem defined as:
<Style x:Key="CalenderStyleNew" TargetType="primitives:CalendarItem">
The problem is that the Calendar type is from the standard System.Windows.Controls package but the CalendarItem is from the namespace Microsoft.Windows.Controls (that's the wpftoolkit namespace you have defined as primitives). So to fix this you have to either use ALL System.Windows.Controls in your styles or use ALL Microsoft.Windows.Controls namespaces.
I fixed your issue to use all Microsoft.Windows.Controls:
<Style x:Key="CalendarStyle1" TargetType="{x:Type Controls:Calendar}">
The global styles must be changed to:
<Style TargetType="{x:Type Controls:DatePicker}">
<Setter
Property="CalendarStyle"
Value="{StaticResource CalendarStyle1}" />
</Style>
And to instantiate a DatePicker you must use the correct one:
<Controls:DatePicker />
NOT
<DatePicker />
If you don't reference it from the WpfToolkit namespace it won't have your custom styles.
Cheers,
Eric