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
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.
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.
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>
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>
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.