Change background of toolkit:TimePicker? - c#

I'm using toolkit:TimePicker in WPF as code below
<toolkit:TimePicker x:Name="datetimeBeginBackup"
Format="Custom"
FormatString="HH:mm:ss"
TextAlignment="Center"
Foreground="#FFFFFF">
<toolkit:TimePicker.Style>
<Style TargetType="toolkit:TimePicker">
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_bgr.png"/>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_disable_bgr.png"/>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</toolkit:TimePicker.Style>
</toolkit:TimePicker>
When the datetimeBeginBackup is disable, the background will be changed with "backup_date_time_picker_disable_bgr.png", it is ok. But the background of TextBlock Time is white, this make user hard to see the text. I want to change the background of TextBlock Time, but I don't know to do it.
Someone can help me?
Many Thanks,
T&T

Move Foreground default value in setter and on trigger IsEnabled, change Foreground to desired value say Black using Style setter.
<toolkit:TimePicker x:Name="datetimeBeginBackup"
Format="Custom"
FormatString="HH:mm:ss"
TextAlignment="Center">
<toolkit:TimePicker.Style>
<Style TargetType="toolkit:TimePicker">
<Setter Property="Foreground" Value="#FFFFFF"/>
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_bgr.png"/>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_disable_bgr.png"/>
</Setter>
<Setter Property="Foreground" Value="#000000"/>
</Trigger>
</Style.Triggers>
</Style>
</toolkit:TimePicker.Style>
</toolkit:TimePicker>

Related

WPF Overridden TabItem style can't click anything

I'm relatively new to WPF and XAML, and I'm trying to override the style of the TabItems in my TabControl. At the top of my xaml file I have this:
<Window.Resources>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border" Margin="0,5,0,0" Background="Transparent"
BorderBrush="LightGray" BorderThickness="1,1,1,1">
<ContentPresenter x:Name="ContentSite" VerticalAlignment="Center"
HorizontalAlignment="Center"
ContentSource="Header" Margin="12,2,12,2"
RecognizesAccessKey="True">
</ContentPresenter>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Panel.ZIndex" Value="100"/>
<Setter TargetName="Border" Property="Background" Value="#EEE9ED"/>
<Setter TargetName="Border" Property="BorderThickness" Value="1,1,1,1"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="IsEnabled" Value="False"/>
<Setter TargetName="Border" Property="Background" Value="LightGray"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FontSize" Value="15"/>
<Setter Property="FontWeight" Value="Bold"/>
</Style>
</Window.Resources>
It applies the style to all TabItems, and that works. It all looks how I want it to. The problem is that now I can't click on any of them. It doesn't look like any of the style guides online have encountered this problem, so it's probably just something really stupid that I'm doing, but I really can't figure it out.
The problem is <Setter Property="IsEnabled" Value="False"/>. A TabItem with IsEnabled set to False cannot be selected. Since all non-selected TabItems are disabled by your Style, this prevents any of them from being selected.

How do I apply the textbox SelectionBrush property to a listbox item?

As opposed to using the default highlight brush, I want the color of a selected list box item to be the same as the color of selected text in a text box. I'm thinking it would be a x:Reference, but what if I need to do this at the control template triggers level inside a style element?
<Style x:Key="{x:Type ListBoxItem}" TargetType="ListBoxItem">
<Setter Property="SnapsToDevicePixels" Value="true"/>
<Setter Property="OverridesDefaultStyle" Value="true"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Border Name="Border" Padding="2" SnapsToDevicePixels="true">
<ContentPresenter />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="Border" Property="Background" Value="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The setter value for the is selected trigger is what I want to make equal to the text selection brush.
As I see it, you`re almost there. Judging by TextBoxBase.SelectionOpacity property, default Opacity for selection brush is 0.4 so we have to emulate that:
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Border" Property="Background">
<Setter.Value>
<SolidColorBrush Color="{DynamicResource {x:Static SystemColors.HighlightColorKey}}"
Opacity="0.4" />
</Setter.Value>
</Setter>
</Trigger>
I tested it and it looks exactly like selected text background in TextBox.

How to change background when toolkit:TimePicker is disabled?

I'm using toolkit:TimePicker in WPF as code below
<toolkit:TimePicker x:Name="datetimeBeginBackup"
Format="Custom"
FormatString="HH:mm:ss"
TextAlignment="Center"
Foreground="#FFFFFF">
<toolkit:TimePicker.Background>
<ImageBrush ImageSource="Resources\backup_date_time_picker_bgr.png"/>
</toolkit:TimePicker.Background>
</toolkit:TimePicker>
When the datetimeBeginBackup is disable, the white background will occur, it is not good.
I want to change the background of datetimeBeginBackup by the image "backup_date_time_picker_disable_bgr.png", but I don't know how to do it.
Someone can help me?
Many Thanks,
T&T
You can do this through a style:
<toolkit:TimePicker x:Name="datetimeBeginBackup"
Format="Custom"
FormatString="HH:mm:ss"
TextAlignment="Center"
Foreground="#FFFFFF">
<toolkit:TimePicker.Style>
<Style TargetType="toolkit:TimePicker">
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_bgr.png"/>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background">
<ImageBrush ImageSource="Resources\backup_date_time_picker_disable_bgr.png"/>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</toolkit:TimePicker.Style>
</toolkit:TimePicker>

Change Button Background when is not enabled

I need to change my Button background (as SolidColorBrush for example) only when it is not enabled (IsEnabled == false). How can I do?
Have I to modify the Button Style using the XAML or can I do this work programmatically? What is the correct XAML code, to change only the Background when it is not enabled?
I tried the following XAML code but it has no effect:
<Button>
<Button.Style>
<Style TargetType="Button">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Background" Value="Red"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
You can change the background by editing the template. You'll find the default template for Button here.
In the trigger for IsEnabled you can simply add something like this:
<Setter Property="Background" Value="{StaticResource DisabledBackgroundBrush}"/>
EDIT:
Try this instead then;
<Window.Resources>
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border x:Name="Overlay" CornerRadius="2">
<ContentPresenter/>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsEnabled" Value="false">
<Setter TargetName="Overlay" Property="Background" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel>
<Button Content="Button" IsEnabled="False"/>
</StackPanel>
Just change it to suit your needs.
You can use a Style trigger:
<Image.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding IsEnabled}" Value="False">
<Setter Property="Image.Source" Value="pack://application:,,,/disabled.png" />
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>

different images for enable and disable states of a button in WPF

I want to change the image of the button in the code below based on its state i.e. use different image for enable and disable state.
<Button CommandParameter="Open" >
<StackPanel Orientation="Horizontal" >
<Image Source="../icons/big/open.png" Width="20" Height="20"></Image>
</StackPanel>
</Button>
Thank you.
You can use a style with triggers like this:
<Style TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<StackPanel Orientation="Horizontal" >
<Image Name="PART_Image" Source="path to normal image" />
</StackPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Source" Value="path to mouse over image" TargetName="PART_Image"/>
</Trigger>
<Trigger Property="IsPressed" Value="True">
<Setter Property="Source" Value="path to pressed image" TargetName="PART_Image"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Source" Value="path to disabled image" TargetName="PART_Image"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I used the following code to make images inside buttons to have half the opacity when the button is disabled and it works great!
<Style TargetType="Button">
<Style.Resources>
<Style TargetType="Image">
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Opacity" Value="0.5" />
</Trigger>
</Style.Triggers>
</Style>
</Style.Resources>
</Style>
Try using Style.Triggers see post wpf-style-trigger
Basically, create a style for the button which makes it display an image object in its content property, and then have a trigger which checks the buttons enabled state, and when it is TRUE have it be one image, and at all other times be the other image.

Categories

Resources