Maybe this was asked before but I have not found this question.
I want to set the ComboboxItem Cursor property to Hand.
I tried the following but doesn't recognize ComboboxItem in TargetName="CombxBoxItem":
<ComboBox.Template>
<ControlTemplate TargetType="{x:Type ComboBox}">
<ControlTemplate.Triggers>
<Trigger Property="HasItems" Value="True">
<Setter TargetName="CombxBoxItem" Property="Cursor" Value="Hand" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</ComboBox.Template>
I think I'm close so I would appreciate a little bit of help. Thanks.
Try this:
<ComboBox>
<ComboBox.Style>
<Style TargetType="ComboBox" BasedOn="{StaticResource MaterialDesignComboBox}">
<Style.Triggers>
<Trigger Property="HasItems" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
<ComboBox.ItemContainerStyle>
<Style TargetType="ComboBoxItem" BasedOn="{StaticResource MaterialDesignComboBoxItemStyle}">
<Setter Property="Cursor" Value="Hand" />
</Style>
</ComboBox.ItemContainerStyle>
</ComboBox>
This seems to work. Could you see if it will work for you?
<ComboBox>
<ComboBox.Style>
<Style TargetType="ComboBox">
<Style.Triggers>
<Trigger Property="HasItems" Value="True">
<Setter Property="Cursor" Value="Hand" />
</Trigger>
</Style.Triggers>
</Style>
</ComboBox.Style>
<ComboBox.Items>
<ComboBoxItem>Item 1</ComboBoxItem>
<ComboBoxItem>Item 2</ComboBoxItem>
<ComboBoxItem>Item 3</ComboBoxItem>
<ComboBoxItem>Item 4</ComboBoxItem>
</ComboBox.Items>
</ComboBox>
Related
I've been struggeling with this issue today when as soon as I try to bind a data trigger on a button I get this issue and I can't find our the issue. The button is contained in a listview which is bound to a dataset.
There is my button code:
<Button
Grid.Row="1"
Grid.Column="0"
Click="BtnAddToCart_Click"
MinWidth="230">
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="Hidden"/>
<Setter Property="Margin" Value="7,5,0,0"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=OrderQty, Converter={StaticResource GreaterThanZero}}" Value="True">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
<Button.Template>
<ControlTemplate>
<WrapPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<WrapPanel.Style>
<Style TargetType="{x:Type WrapPanel}">
<Setter Property="Background" Value="#ec3c42"/>
<Setter Property="TextBlock.Foreground" Value="White"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="White"/>
<Setter Property="Cursor" Value="Hand"></Setter>
<Setter Property="TextBlock.Foreground" Value="#ec3c42"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</WrapPanel.Style>
<WrapPanel.Resources>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Padding" Value="10,10" />
<Setter Property="FontWeight" Value="Bold"/>
<Setter Property="FontSize" Value="15"/>
</Style>
</WrapPanel.Resources>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Ajouter aux Commandes"></TextBlock>
<fa:FontAwesome Visibility="Hidden" VerticalAlignment="Center" HorizontalAlignment="Right" Icon="check">
<fa:FontAwesome.Triggers>
<DataTrigger Binding="{Binding Path=ShowAsChecked}" Value="true">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</fa:FontAwesome.Triggers>
</fa:FontAwesome>
</WrapPanel>
</ControlTemplate>
</Button.Template>
</Button>
The issue seems to happen when I add this piece of code:
<fa:FontAwesome.Triggers>
<DataTrigger Binding="{Binding Path=ShowAsChecked}" Value="true">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</fa:FontAwesome.Triggers>
When I remove the trigger the code run as expected.
Even when I bind it to a property that is working on a different level it doesn't work.
I tried changing the binding to:
Binding="{Binding Path=OrderQty, Converter={StaticResource GreaterThanZero}}
and it's still giving me the error. I tried to look up some code example but didn't find anything about that issue (since the error is pretty common it's hard to tell what is going on).
Try
<fa:FontAwesome Visibility="Hidden" VerticalAlignment="Center" HorizontalAlignment="Right" Icon="check">
<fa:FontAwesome.Style>
<Style TargetType="fa:FontAwesome">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=ShowAsChecked}" Value="true">
<Setter Property="Visibility" Value="Visible"></Setter>
</DataTrigger>
</Style.Triggers>
</Style>
</fa:FontAwesome.Style>
</fa:FontAwesome>
I have a DataGrid with four columns for which I have defined a style as well as a triggered style for the case the user enters an invalid value.
<Style TargetType="{x:Type DataGridRow}">
<Setter Property="FontSize" Value="16"/>
<Setter Property="FontFamily" Value="ArialMT"/>
<Setter Property="Height" Value="24"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="ValidationErrorTemplate">
<Setter.Value>
<ControlTemplate>
<Grid>
<Ellipse Width="12" Height="12" Fill="Red" Stroke="Black" StrokeThickness="0.5"/>
<TextBlock FontWeight="Bold" Padding="4,0,0,0" Margin="0" VerticalAlignment="Top" Foreground="White" Text="!" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush" Value="Red"/>
<Setter Property="IsEnabled" Value="True" />
<Setter Property="ToolTip" Value="{Binding RelativeSource={x:Static RelativeSource.Self}, Path=(Validation.Errors)[0].ErrorContent}"/>
</Trigger>
</Style.Triggers>
</Style>
This works well and the complete DataGridRow is marked as faulty because I used this in the XAML:
<DataGrid.RowValidationRules>
<local:CycleValidationRule ValidationStep="UpdatedValue" />
</DataGrid.RowValidationRules>
Now I want to highlight the DataGridCell with the invalid value explictely additionally (setting the background colour). Hence, I defined another style:
<Style x:Key="cycleErrStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="Magenta"/>
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true" >
<Setter Property="Background" Value="Red" />
<Setter Property="Foreground" Value="White" />
</Trigger>
</Style.Triggers>
</Style>
but this doesn't work.
When I set <Trigger Property="Validation.HasError" Value="false" > to false, the style affects. It seems as if the Validation.HasError property has been reset after validation for the grid's row.
In the XAML I defined this:
<DataGridTextColumn x:Name="TagCycle" Header="Cycle" Binding="{Binding Mode=TwoWay, Path=RawTag.Cycle, UpdateSourceTrigger=PropertyChanged, ValidatesOnDataErrors=True}"
ElementStyle="{StaticResource ResourceKey=cycleErrStyle}" />
How can I highlight the invalid cell additionally to marking the row as faulty?
You could use a DataTrigger that binds to the Validation.HasError attached property of the parent DataGridRow:
<Style x:Key="cycleErrStyle" TargetType="{x:Type TextBlock}">
<Setter Property="Background" Value="Magenta"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Path=(Validation.HasError), RelativeSource={RelativeSource AncestorType=DataGridRow}}" Value="true" >
<Setter Property="Background" Value="Red" />
<Setter Property="Foreground" Value="White" />
</DataTrigger>
</Style.Triggers>
</Style>
I am trying to style my WPF TabControl. I basically want to get the tab control to have a transparent background, with a white border and text. I want the selected tab to have a White Background and Transparent Text (or any colour text!). Essentially a 2 colour tab.
However, I cannot override the selected tab appearance - this shows as white. And my child textboxes are taking the style of the TabItem font. Note, in the screen shot my labels have their own style set so do not take the TabItem font.
I have the following XAML in place to do this. Ideally I want to create the styles so that I can reuse across the application.
Resource Dictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008">
<Style x:Key="Tabs" TargetType="TabControl">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="White"/>
</Style>
<Style x:Key="TabItemStyle" TargetType="TabItem">
<Setter Property="Foreground" Value="White" />
<Setter Property="VerticalAlignment" Value="Top" />
<Setter Property="FontSize" Value="16" />
<Setter Property="Background" Value="Transparent"/>
<Style.Triggers>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="True">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="White"/>
</DataTrigger>
<DataTrigger Binding="{Binding IsSelected, RelativeSource={RelativeSource AncestorType=TabItem}}" Value="False">
<Setter Property="Foreground" Value="LightGray"/>
<Setter Property="Background" Value="Transparent"/>
</DataTrigger>
</Style.Triggers>
</Style>
</ResourceDictionary>
Then the XAML MarkUp
<TabControl Style="{StaticResource Tabs}">
<TabItem Header="General" Style="{StaticResource TabItemStyle}">...</TabItem>
<TabItem Header="Details" Style="{StaticResource TabItemStyle}">...</TabItem>
<TabItem Header="Info" Style="{StaticResource TabItemStyle}">...</TabItem>
<TabItem Header="More Stuff..." Style="{StaticResource TabItemStyle}">...</TabItem>
</TabControl>
How can I style my tabs to be and prevent the children from sizing?
Your DataTriggers don't work. To fix it change RelatveSource to Self
Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Self}}"
However I would suggest to change them to Triggers like so:
<Style.Triggers>
<Trigger Property="IsSelected" Value="True">
<Setter Property="Foreground" Value="Red"/>
<Setter Property="Background" Value="White"/>
</Trigger>
<Trigger Property="IsSelected" Value="False">
<Setter Property="Foreground" Value="LightGray"/>
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
You should create control template for TabItem.
This sample change TabItem background to Transparent and Text color to White.
You can use own color schema.
<Window.Resources>
<Style TargetType="TabControl">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="BorderBrush"
Value="White" />
</Style>
<Style TargetType="{x:Type TabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid>
<Border Name="Border"
Margin="0,0,-4,0"
Background="{x:Static Brushes.White}"
BorderBrush="{x:Static Brushes.White}"
BorderThickness="1,1,1,1"
CornerRadius="2,12,0,0">
<ContentPresenter x:Name="ContentSite"
Margin="12,2,12,2"
HorizontalAlignment="Center"
VerticalAlignment="Center"
ContentSource="Header"
RecognizesAccessKey="True" />
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="True">
<Setter Property="Panel.ZIndex"
Value="100" />
<Setter TargetName="Border"
Property="Background"
Value="{x:Static Brushes.Transparent}" />
<Setter TargetName="Border"
Property="BorderThickness"
Value="1,1,1,0" />
<Setter Property="TextBlock.Foreground"
Value="White" />
<!--<Setter Property="TextBlock.Foreground"
Value="Transparent" />-->
</Trigger>
<Trigger Property="IsEnabled"
Value="False">
<Setter TargetName="Border"
Property="Background"
Value="{x:Static Brushes.White}" />
<Setter TargetName="Border"
Property="BorderBrush"
Value="{x:Static Brushes.White}" />
<Setter Property="Foreground"
Value="{x:Static Brushes.White}" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid Background="SkyBlue">
<TabControl Margin="20">
<TabItem Header="TabItem #1">
<TextBox>Tab Item #1 content</TextBox>
</TabItem>
<TabItem Header="TabItem #2">
<TextBox>Tab Item #1 content</TextBox>
</TabItem>
<TabItem Header="TabItem #3">
<TextBox>Tab Item #1 content</TextBox>
</TabItem>
</TabControl>
</Grid>
The Problem: In BarCheckItem, if BarCheckItem IsChecked, how do I style a border inside its DataTemplate?
I'm styling a BarCheckItem. To do it, I added a ContentTemplate with a DataTemplate inside where I added some color borders that change on MouseOver:
<dxb:BarCheckItem Name="barCheckItemRecord"
Command="..."
Cursor="Hand"
IsChecked="..."
IsVisible="..." >
<dxb:BarCheckItem.ContentTemplate>
<DataTemplate>
<StackPanel>
<Border x:Name="audioButtonInnerBorderLight">
<Canvas .../>
</Border>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="#30FFFFFF" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</dxb:BarCheckItem.ContentTemplate>
</dxb:BarCheckItem>
What I want to do now is to change the color of the border when the BarCheckItem is IsChecked.
Problem is, I only know how to use the triggers in a style, like this:
<dxb:BarCheckItem Name="barCheckItemRecord" [all the code from above]>
...
<dxb:BarCheckItem.Style>
<Style TargetType="{x:Type dxb:BarCheckItem}">
<Setter Property="Background" Value="Red" />
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
<Trigger Property="IsChecked" Value="{x:Null}">
<Setter Property="Background" Value="Yellow" />
</Trigger>
</Style.Triggers>
</Style>
</dxb:BarCheckItem.Style>
</dxb:BarCheckItem>
But I don't know how to point to the border (x:Name="audioButtonInnerBorderLight") FROM the triggers. Because the triggers don't know where the border is.
How can I make something like the following work?:
<Style TargetType="{x:Type dxb:BarCheckItem}">
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="Purple" />
</Trigger>
</Style>
Note: I thought the best idea was to put the border in a ContentTemplate in the BarCheckItem, using a Template setter. But it looks like BarCheckItems don't allow Templating.
You sholud add those triggers to the DataTemplate :
<dxb:BarCheckItem Name="barCheckItemRecord"
Command="..."
Cursor="Hand"
IsChecked="..."
IsVisible="..." >
<dxb:BarCheckItem.ContentTemplate>
<DataTemplate>
<StackPanel>
<Border x:Name="audioButtonInnerBorderLight">
<Canvas .../>
</Border>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="#30FFFFFF" />
</Trigger>
<DataTrigger Binding="{Binding Path=IsChecked,RelativeSource={RelativeSource AncestorType={x:Type dxb:BarCheckItem}}}" Value="True">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="Blue" />
</DataTrigger>
<DataTrigger Binding="{Binding Path=IsChecked,RelativeSource={RelativeSource AncestorType={x:Type dxb:BarCheckItem}}}" Value="{x:Null}">
<Setter TargetName="audioButtonInnerBorderLight" Property="Background" Value="Yellow" />
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</dxb:BarCheckItem.ContentTemplate>
</dxb:BarCheckItem>
I finally found the best way to do this.
What I did was adding the ContentTemplate in the styles, and use the triggers from there:
<dxb:BarCheckItem ...>
<dxb:BarCheckItem.Style>
<Style TargetType="{x:Type dxb:BarCheckItem}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Border x:Name="audioButtonInnerBorderLight">
<Canvas .../>
</Border>
</StackPanel>
<DataTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter TargetName="audioButtonInnerBorderDark" Property="Background" Value="#30FFFFFF" />
</Trigger>
</DataTemplate.Triggers>
</DataTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel>
<Border x:Name="audioButtonInnerBorderCHECKED">
<Canvas .../> (different styles here)
</Border>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Trigger>
</Style.Triggers>
</Style>
</dxb:BarCheckItem.Style>
</dxb:BarCheckItem>
I am creating a button with a simple Polyline which I want to change color when the button is Disabled (btnUp.IsEnabled = false).
I tried this:
<RepeatButton x:Name="btnUp" Foreground="Green">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="Content">
<Setter.Value>
<Polyline x:Name="arrowUp" Points="0,2 3,0 6,2" Stroke="{Binding RelativeSource={RelativeSource AncestorType=RepeatButton}, Path=Foreground, Mode=TwoWay}" StrokeThickness="2"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#FFFFFFFF"/>
</Trigger>
</Style.Triggers>
</Style>
</RepeatButton.Style>
</RepeatButton>
But the Polyline still has the same (Green) color when the button is disabled. Even though I did expect it to be white because of the databinding between the button.foreground and polyline.stroke.
However if I change the trigger to this it works (the button is collapsed):
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Visibility" Value="Collapsed"/>
</Trigger>
I found the answer on my own.
I moved the Foreground="Green" to a separate setter, <Setter Property="Foreground" Value="#FF383838"/> inside the <Style>, then it worked.
I'm not sure why though.
Here's the complete solution:
<RepeatButton x:Name="btnUp">
<RepeatButton.Style>
<Style TargetType="{x:Type RepeatButton}">
<Setter Property="Foreground" Value="Green"/>
<Setter Property="Content">
<Setter.Value>
<Polyline x:Name="arrowUp" Points="0,2 3,0 6,2" Stroke="{Binding RelativeSource={RelativeSource AncestorType=RepeatButton}, Path=Foreground, Mode=TwoWay}" StrokeThickness="2"/>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="#FFFFFFFF"/>
</Trigger>
</Style.Triggers>
</Style>
</RepeatButton.Style>
</RepeatButton>