For my custom control, I am using the Dynamic resource to set the Foreground property. Initially when i run the app the Foreground property was not set to my control. When I change value dynamically Foreground was applied correctly. How can I resolve this issue?
PS: Simple sample WpfApplication4
MainWindow.xaml
<Window x:Class="WpfApplication4.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Width="300"
Height="200">
<Window.Resources>
<SolidColorBrush x:Key="ForegroundBrush" Color="Red" />
<SolidColorBrush x:Key="BackgroundBrush" Color="Yellow" />
<Style x:Key="MyStyle" TargetType="ContentControl">
<Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}" />
<Setter Property="Background" Value="{DynamicResource BackgroundBrush}" />
</Style>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel>
<Button Click="ButtonBase_OnClick" Content="Create and Add Custom Control With Style" />
<Button Click="ButtonBase_OnClick_1" Content="Change Color" />
</StackPanel>
<StackPanel x:Name="myPanel" Grid.Row="1" />
</Grid>
MainWindow.xaml.cs
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void ButtonBase_OnClick(object sender, RoutedEventArgs e)
{
var control = new MyControl {Style = this.Resources["MyStyle"] as Style};
control.CreateContent(string.Format("My Control {0}", myPanel.Children.Count + 1));
myPanel.Children.Add(control);
}
private void ButtonBase_OnClick_1(object sender, RoutedEventArgs e)
{
var brush = (SolidColorBrush)Resources["ForegroundBrush"];
Resources["ForegroundBrush"] = new SolidColorBrush(Color.Add(brush.Color, Color.FromRgb(0, 100, 100)));
var brush1 = (SolidColorBrush)Resources["BackgroundBrush"];
Resources["BackgroundBrush"] = new SolidColorBrush(Color.Add(brush1.Color, Color.FromRgb(0, 100, 100)));
}
}
public class MyControl : ContentControl
{
public MyControl()
{
DefaultStyleKey = typeof(MyControl);
}
public void CreateContent(string text)
{
this.Content = new TextBlock() {Text = text};
}
}
Generic.xaml
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication4">
<Style TargetType="local:MyControl">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:MyControl">
<Border Background="{TemplateBinding Background}">
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
If you want to apply a Style to a control, then you have to apply the Style to that control (which you haven't done in the code example that you have provided). You have two choices here... either try this (wherever you use the control):
<local:MyControl Style="{StaticResource MyStyle}" />
Or define your Style like this, which will affect all instances of your control within scope:
<Style TargetType="ContentControl">
<Setter Property="Foreground" Value="{DynamicResource ForegroundBrush}" />
<Setter Property="Background" Value="{DynamicResource BackgroundBrush}" />
</Style>
Related
I wrote a simple dialog (XAML/WPF) and a test app and the dialog looks fine. In particular the buttons in the ListView have rounded corners. I've posted a picture and the code below.
The problem? When I use this dialog inside a much larger program (codebase too large to share), the rounded corners and other styling is gone. I strongly suspect something in the larger program is taking precedence over my local work. Perhaps a global style for buttons or some such thing?
I'd like to understand what is going on. Presumably something in the main app takes precedence over my xaml work?
I'd like to know if there is a way to say "don't inherit styles from the app itself. Rather use WPF defaults unless I override them.", assuming that is the problem.
See picture (notice rounded corners)
See picture from when I call it from actual main application instead of test application
Notice in particular lack of rounded corners. My work to produce rounded corners is gone! Also, in the test app, hovering over a button shows a blue color which I assume is default (I didn't do it). When called from main app, no such hover effect. I suspect the main app gets rid of that somewhere.
Here's the simple dialog xaml
<Window x:Class="FirmsDialog"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:Dialogs"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="400"
Width="390" Height="720" BorderBrush="LightGray"
WindowStartupLocation="CenterScreen" ResizeMode="NoResize"
x:Name="FirmsViewDlg" Loaded="FirmsViewDlg_Loaded"
>
<Window.Resources>
<FontFamily x:Key="AvenirNextforCompany">
pack://application:,,,/Assets/Fonts/#AvenirNextforCompany
</FontFamily>
<local:ReverseObjectToBool x:Key="ReverseObjectToBoolConverter" />
<local:ObjectToBool x:Key="ObjectToBoolConverter" />
<!-- New style -->
<Style x:Key="StyleListViewItem" TargetType="ListViewItem">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Green"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Background" Value="Blue"/>
</Trigger>
</Style.Triggers>
</Style>
<!-- Existing style -->
<Style x:Key="StyleListView" TargetType="ListView">
<Setter Property="ItemContainerStyle" Value="{StaticResource StyleListViewItem}"/>
<Setter Property="SnapsToDevicePixels" Value="true"/>
<!-- ... -->
</Style>
</Window.Resources>
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Label Grid.Row="0" Content="Select Company" HorizontalAlignment="Center" FontSize="20px" Foreground="#393a3d" FontFamily="{StaticResource AvenirNextforCompany}" FontWeight="Normal" ></Label>
<Label Grid.Row="1" Content="Accountant companies" Margin="10,0" FontFamily="{StaticResource AvenirNextforCompany}" FontSize="14px" Foreground="#8d9096" FontWeight="Normal"></Label>
<ListView BorderThickness="0" Grid.Row="2" ItemsSource="{Binding RealmMembershipInfo}" SelectedItem="{Binding SelectedFirm}" x:Name="realmListBox"
HorizontalContentAlignment="Stretch" HorizontalAlignment="Stretch" Height="Auto" Margin="0,0,0,0"
VerticalAlignment="Top" FontWeight="Bold" FontSize="14" Background="White"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
BorderBrush="LightGray">
<ListView.ItemTemplate>
<DataTemplate>
<Button Click="Button_Click"
MinHeight="65" Padding="10,0,10,0"
Margin="0,0,0,0" HorizontalContentAlignment="Left" HorizontalAlignment="Stretch" BorderBrush="LightGray" Background="White" Foreground="#393a3d" FontFamily="{StaticResource AvenirNextforCompany}" FontSize="14px" FontWeight="SemiBold"
>
<Button.Resources>
<Style TargetType="Border">
<Setter Property="CornerRadius" Value="9"/>
</Style>
</Button.Resources>
<TextBlock Text="{Binding displayName}" TextWrapping="Wrap" HorizontalAlignment="Stretch" Foreground="#393a3d" FontFamily="{StaticResource AvenirNextforCompany}" FontSize="14px" FontWeight="Bold" >
</TextBlock>
</Button>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem">
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Margin" Value="10,10,10,10"/>
<Setter Property="Padding" Value="0"/>
<Style.Triggers>
<Trigger Property="Control.IsMouseOver" Value="True">
<Setter Property="Control.Background" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="BorderThickness" Value="0" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
</Grid>
</Window>
Simple program to show the Xaml above
using Dialogs;
using Models;
using System.Collections.Generic;
using System.Windows;
namespace TestApp
{
/// <summary>
/// Interaction logic for MainWindow.xaml
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Button_SelectFirm(object sender, RoutedEventArgs e)
{
// hack code to set up dialog
RealmMembershipInfo realmInfo = new RealmMembershipInfo();
realmInfo.realmMembershipInfo = new List<RealmMembershipItem>();
RealmMembershipItem item = new RealmMembershipItem();
item.displayName = "Company 1";
realmInfo.realmMembershipInfo.Add(item);
item = new RealmMembershipItem();
item.displayName = "Company2";
realmInfo.realmMembershipInfo.Add(item);
FirmsDialog dlg = new FirmsDialog(realmInfo);
dlg.ShowDialog();
MessageBox.Show("Your picked firm: " + dlg.SelectedFirm);
}
private void Button_SelectClient(object sender, RoutedEventArgs e)
{
}
}
}
You haven't set the style on the Listview.
<ListView Style={StaticResource StyleListView} ....
And you are using the default style for the ItemsContainer. You need to add the a base style.
<ListView.ItemContainerStyle>
<Style TargetType="ListViewItem" BasedOn={StaticResource StyleListViewItem}...
I have a UserContol for a hyperlink. I need to dynamically set the content of the button to a database value.
I have looked at this link [1]:Custom button user control style overwritten when content is set and it seems I have most everything from that post. But I get errors when I try to set the content in the user control. I am not a WPF programmer so any help in small words would be appreciated.
USER CONTROL
`
<UserControl x:Class="DDC.Controls.LinkButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
x:Name="UserControl">
<UserControl.Resources>
<Style x:Key="LinkButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlLightLightBrushKey}}"/>
<Setter Property="Background" Value="{StaticResource ButtonNormalBackground}"/>
<Setter Property="BorderBrush" Value="{StaticResource ButtonNormalBorder}"/>
<Setter Property="Cursor" Value="Hand" />
<Setter Property="Padding" Value="5,0,0,0" />
<Setter Property="ToolTip" Value="Click to Follow Link" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<ContentPresenter
VerticalAlignment="Top">
<ContentPresenter.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="TextDecorations" Value="Underline" />
<Setter Property="TextWrapping" Value="Wrap"/>
</Style>
</ContentPresenter.Resources>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Foreground" Value="LightGray" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Grid>
<Button Name ="btnLinkAddress"
Style="{DynamicResource LinkButtonStyle}"
Content="{Binding Path=Content, RelativeSource={RelativeSource AncestorType={x:Type LinkButton}}}"
Width="Auto"
Height="Auto"
UseLayoutRounding="True"
Click="LinkButton_Click" >
</Button>
</Grid>
</UserControl>
C# Class
public partial class LinkButton : UserControl
{
public new static DependencyProperty ContentProperty =
DependencyProperty.Register("Content", typeof(object), typeof(LinkButton));
public new object Content
{
get { return (string)GetValue(ContentProperty); }
set { SetValue(ContentProperty, value); }
}
private void LinkButton_Click(object sender, RoutedEventArgs e)
{
Button btn = (Button)sender;
TextBlock tb = (TextBlock)btn.Content;
Uri uri = new System.Uri(tb.Text);
// Uri uri = new System.Uri(btn.Content.ToString());
Process.Start(new ProcessStartInfo(uri.AbsoluteUri));
e.Handled = true;
}
public LinkButton()
{
InitializeComponent();
}
ERRORS
I get these errors when trying to set the content in the user control
Content="{Binding Path=Content, RelativeSource={RelativeSource AncestorType={x:Type LinkButton}}}"`
LinkButton is not supported in a Windows Presentation Foundation (WPF) project.
Content="{Binding Path=Content, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
Logical tree depth exceeded while traversing the tree. This could indicate a cycle in the tree.
Rename the property to something else than Content:
public partial class LinkButton : UserControl
{
public static DependencyProperty ButtonContentProperty =
DependencyProperty.Register("ButtonContent", typeof(object), typeof(LinkButton));
public object ButtonContent
{
get { return (string)GetValue(ButtonContentProperty); }
set { SetValue(ButtonContentProperty, value); }
}
private void LinkButton_Click(object sender, RoutedEventArgs e)
{
...
}
public LinkButton()
{
InitializeComponent();
}
}
...and bind to it like this:
<Button Name ="btnLinkAddress"
Style="{DynamicResource LinkButtonStyle}"
Content="{Binding Path=ButtonContent, RelativeSource={RelativeSource AncestorType={x:Type UserControl}}}"
Width="Auto"
Height="Auto"
UseLayoutRounding="True"
Click="LinkButton_Click" >
If you want to set the AncestorType to LinkButton, you should define a namespace mapping:
<Button xmlns:local="clr-namespace:DDC.Controls"
Name ="btnLinkAddress"
Style="{DynamicResource LinkButtonStyle}"
Content="{Binding Path=Content, RelativeSource={RelativeSource AncestorType={x:Type local:LinkButton}}}"
Width="Auto"
Height="Auto"
UseLayoutRounding="True"
Click="LinkButton_Click" >
I want to show an icon in some of my buttons. Since aligning an image inside a button isn't exactly trivial, I though a user control, derived control or something would come in handy. So I googled, tried, compiled and now I came up with the following code.
Unfortunately, my properties are not bound to anything and I cannot see the text nor an image. How can I make this work? What's the missing piece? I'm using VS2010 and .NET 4.0.
XAML:
<Button
x:Class="MyNS.IconButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006">
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<Image Source="{Binding IconSource}" Name="Icon" Width="{Binding IconSize}" Height="{Binding IconSize}" Margin="0,0,4,0"/>
<ContentPresenter/>
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsEnabled" Value="False">
<Setter Property="Image.Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
</Button>
Code file:
public partial class IconButton : Button
{
public static DependencyProperty IconSourceProperty = DependencyProperty.Register(
"IconSource",
typeof(ImageSource),
typeof(IconButton));
public static DependencyProperty IconSizeProperty = DependencyProperty.Register(
"IconSize",
typeof(int),
typeof(IconButton),
new PropertyMetadata(11));
public ImageSource IconSource
{
get { return (ImageSource) GetValue(IconSourceProperty); }
set { SetValue(IconSourceProperty, value); }
}
public int IconSize
{
get { return (int) GetValue(IconSizeProperty); }
set { SetValue(IconSizeProperty, value); }
}
public IconButton()
{
InitializeComponent();
}
}
It looks like your data binding might be the source of the issues. With those changes I was able to get an image to display in another page using your IconButton.
I made the following changes:
<!-- Added x:Name="_this" -->
<Button x:Class="ButtonTest.IconButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
x:Name="_this">
<Button.Template>
<ControlTemplate>
<StackPanel Orientation="Horizontal"
Background="Red">
<!-- Bindings Changed Here -->
<Image Source="{Binding ElementName=_this, Path=IconSource}"
Name="Icon"
Width="{Binding ElementName=_this, Path=IconSize}"
Height="{Binding ElementName=_this, Path=IconSize}" Margin="0,0,4,0"/>
<ContentPresenter />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="Button.IsEnabled" Value="False">
<Setter Property="Image.Opacity" Value="0.5"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Button.Template>
How can I change a Button template dynamically?
I have a ComboBox where by changing his selected value I want to change a Button Template.
This is what I have been trying to do:
<Window.Resources>
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="#FF2D2D7A" Margin="7.5,9.5,8.5,11" Stroke="Black"
RadiusX="45" RadiusY="45" StrokeThickness="6"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ButtonControlTemplate2" TargetType="{x:Type Button}">
<Grid>
<ed:RegularPolygon Fill="#FFE7F9C9" Height="Auto" InnerRadius="0.47211"
Margin="20.5,16,15.5,8" PointCount="5" Stretch="Fill"
Stroke="Black" StrokeThickness="6" Width="Auto"/>
</Grid>
</ControlTemplate>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<ComboBox Name="GroupBoxHeaderComboBox" ItemsSource="{Binding Path=collection}"
DisplayMemberPath="Key" Height="52" Margin="211.5,60,230.5,0"
VerticalAlignment="Top" SelectedIndex="1"/>
<Button Content="Button" HorizontalAlignment="Left" Height="102" Margin="47.5,0,0,91"
VerticalAlignment="Bottom" Width="132"
Template="{DynamicResource ButtonControlTemplate2}"/>
<Button Content="Button" HorizontalAlignment="Right" Height="112.5" Margin="0,0,27.5,85"
VerticalAlignment="Bottom" Width="153"
Template="{DynamicResource ButtonControlTemplate1}"/>
<Button Content="Button" Height="102" Margin="239.5,0,252.5,13.5"
VerticalAlignment="Bottom"
Template="{Binding ElementName=GroupBoxHeaderComboBox, Path=SelectedItem.Value}"/>
</Grid>
And here are the associated Templates:
<Window.Resources>
<ControlTemplate x:Key="ButtonControlTemplate1" TargetType="{x:Type Button}">
<Grid>
<Rectangle Fill="#FF2D2D7A" Margin="7.5,9.5,8.5,11" Stroke="Black"
RadiusX="45" RadiusY="45" StrokeThickness="6"/>
</Grid>
</ControlTemplate>
<ControlTemplate x:Key="ButtonControlTemplate2" TargetType="{x:Type Button}">
<Grid>
<ed:RegularPolygon Fill="#FFE7F9C9" Height="Auto" InnerRadius="0.47211"
Margin="20.5,16,15.5,8" PointCount="5" Stretch="Fill"
Stroke="Black" StrokeThickness="6" Width="Auto"/>
</Grid>
</ControlTemplate>
</Window.Resources>
And the code behind:
public partial class MainWindow : Window
{
public Dictionary<string, string> collection
{
get;
private set;
}
public MainWindow()
{
this.InitializeComponent();
DataContext = this;
collection = new Dictionary<string, string>()
{
{ "DynamicResource ButtonControlTemplate2", "{DynamicResource ButtonControlTemplate2}"},
{ "DynamicResource ButtonControlTemplate1", "{DynamicResource ButtonControlTemplate2}"},
};
// Insert code required on object creation below this point.
}
}
Is there another genric way to acomplish this?... I want that most of the code would be xaml.
EDIT:
Is there a point to do it using a style? Let's say I want more then one object to act, otherwise is there a point to change the style and to do it all from there?
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
DataContext = this;
}
public Dictionary<string, ControlTemplate> collection
{
get
{
Dictionary<string, ControlTemplate> controlTemplates = new Dictionary<string, ControlTemplate>();
controlTemplates.Add("ButtonControlTemplate1", FindResource("ButtonControlTemplate1") as ControlTemplate);
controlTemplates.Add("ButtonControlTemplate2", FindResource("ButtonControlTemplate2") as ControlTemplate);
return controlTemplates;
}
}
}
Create a ControlTemplate in Windows resource,
<Window.Resources>
<ControlTemplate x:Key="GreenTemplate" TargetType="{x:Type Button}">
<Grid>
<Ellipse Fill="Green"/>
<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Grid>
</ControlTemplate>
</Window.Resources>
Now in run time you can change the template property of button.
private void Button_Clicked(object sender, RoutedEventArgs e)
{
Button btn = e.OriginalSource as Button;
if (btn != null)
{
btn.Template = FindResource("GreenTemplate") as ControlTemplate;
}
}
You can use a data trigger and do it all in xaml.
This uses a tree but the concept is the same
<Window x:Class="WpfBindingTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfBindingTest"
Title="Window3" Height="300" Width="300" Name="win3" >
<Window.Resources>
<XmlDataProvider x:Key="treeData" XPath="*">
<x:XData>
<Items Name="Items" xmlns="">
<Item1/>
<Item2>
<Item22/>
<Item12/>
<Item13>
<Item131/>
<Item131/>
</Item13>
</Item2>
</Items>
</x:XData>
</XmlDataProvider>
<HierarchicalDataTemplate ItemsSource="{Binding XPath=child::*}" x:Key="template">
<TextBlock Name="textBlock" Text="{Binding Name}"/>
</HierarchicalDataTemplate>
</Window.Resources>
<StackPanel>
<TreeView ItemTemplate="{StaticResource template}"
Name="treeView"
ItemsSource="{Binding Source={StaticResource treeData}}">
<TreeView.ItemContainerStyle>
<!--Using style setter to set the TreeViewItem.IsExpanded property to true, this will be applied
to all TreeViweItems when they are generated-->
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="IsExpanded" Value="True"/>
</Style>
</TreeView.ItemContainerStyle>
</TreeView>
<Button Width="120" Height="30">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Content" Value="Default" />
<Style.Triggers>
<DataTrigger Binding="{Binding ElementName=treeView, Path=SelectedItem.Name}" Value="Item12">
<Setter Property="Content" Value="Now changed" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
from here.
(I just googled to get an example faster)
The text is grayed out when the DatePicker is disabled and I want the content to be easier to read.
What I did on some TextBoxes was:
<Style TargetType="TextBox">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="Black" />
</Trigger>
</Style.Triggers>
</Style>
It did make the text easier to read.
I do manage to change the Foreground colour on the DataPicker but it does not do the trick. The text was still grayed out.
Seems like there is another property I need to set to make the content of the disabled DatePicker easier to read.
So, how do I make the content of my disabled DatePicker easier to read?
Can you extend DatePicker by adding bool DependencyProperty called Editable.
I found a working example at the following link, note that I run this code in .NET 4.
Here is the DatePicker Control:
using System.Windows;
using System.Windows.Controls;
using System.Windows.Controls.Primitives;
using System.Windows.Data;
namespace DatePickerStyle
{
public class ExtendedDatePicker : DatePicker
{
public static readonly DependencyProperty EditableProperty = DependencyProperty.Register("Editable", typeof(bool),
typeof(ExtendedDatePicker), new PropertyMetadata(true));
public bool Editable
{
get { return (bool)GetValue(EditableProperty); }
set { SetValue(EditableProperty, value); }
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
var textBox = GetTemplateChild("PART_TextBox") as DatePickerTextBox;
var binding = new Binding { Source = this, Path = new PropertyPath(ExtendedDatePicker.EditableProperty) };
textBox.SetBinding(UIElement.FocusableProperty, binding);
}
}
}
Here is the XAML:
<Window x:Class="DatePickerStyle.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:DatePickerStyle="clr-namespace:DatePickerStyle"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<DatePicker IsEnabled="True" Grid.Row="0" SelectedDate="2002/12/31"/>
<DatePicker IsEnabled="False" Grid.Row="1" SelectedDate="2002/12/31"/>
<DatePickerStyle:ExtendedDatePicker Editable="True" Grid.Row="2" SelectedDate="2002/12/31"/>
<DatePickerStyle:ExtendedDatePicker Editable="False" Grid.Row="3" SelectedDate="2002/12/31"/>
</Grid>
</Window>
My I suggest this simpler, universal approach?
<ControlTemplate x:Key="MyDisabledDatePicker">
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock
Text="{Binding Path=SelectedDate, StringFormat={}{0:d}, RelativeSource={RelativeSource TemplatedParent}}"
VerticalAlignment="Center" HorizontalAlignment="Left" Padding="10,0,0,0"/>
</Border>
</ControlTemplate>
<Style TargetType="{x:Type DatePicker}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsEnabled, RelativeSource={RelativeSource Self}}" Value="false">
<Setter Property="Template" Value="{StaticResource MyDisabledDatePicker}" />
</DataTrigger>
</Style.Triggers>
</Style>
Presto!
the above code w ExtendedDatePicker works, first I thought it didn't but that was because the dropdown could still change the text and the Editable="False" doesn't work on the dropdown
so don't forget to add the following to the ExtendedDatePicker
Editable="False" AllowDrop="False" IsDropDownOpen="False" IsHitTestVisible="False" IsManipulationEnabled="False"