I have a style for a ListBox using TextBoxes as defined below:
<Style x:Key="MyListBoxStyle" TargetType="ListBox">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="{Binding Mode=OneWay}" Background="LightGray"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I use this style for a number of ListBox display readonly data.
What I also have is a group of ListBoxes in which I would like to be able to click on one of the TextBoxes in them and then perform some action. So what I want to do is attach a Click event on the TextBox. Ideally I'd like to leverage the above style without having to retype it all and just add a new style which added the event binding. How would yo go about this?
Style.BaseOn
<Style x:Key="MyListBoxStyle" TargetType="ListBox">
<Setter Property="Background" Value="LightGray"/>
<Setter Property="BorderThickness" Value="2"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="{Binding Mode=OneWay}" Background="LightGray"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyListBoxStyle2" BasedOn="{StaticResource MyListBoxStyle}" TargetType="ListBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBox Text="{Binding Mode=OneWay}" Background="LightGray" GotFocus="TextBox_GotFocus"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I'm trying to set up a trigger that removes the padding on the listview when the scrollbar is hidden.
I put the trigger on the listview style but I'm getting inconsistent results. For example the background property in the trigger is always active no matter what the scrollbar visibility is.
I've taken a look at the MSDN for the ScrollViewer.ComputedVerticalScrollBarVisibility Property but am not having much luck figuring out what's wrong.
<ListView Grid.Row="1" Grid.Column="1" BorderBrush="{x:Null}" BorderThickness="0" ItemsSource="{Binding Tasks}" Margin="5"
ScrollViewer.CanContentScroll="False" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Background" Value="Transparent" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ListViewItem}">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
<ListView.ItemTemplate>
<DataTemplate>
<!-- SNIP -->
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Style>
<Style>
<Setter Property="ListView.Padding" Value="0,0,5,0"/>
<Setter Property="ListView.Background" Value="{x:Null}" />
<Style.Triggers>
<Trigger Property="ScrollViewer.ComputedVerticalScrollBarVisibility" Value="Hidden">
<Setter Property="ListView.Padding" Value="0"/>
<Setter Property="ListView.Background" Value="Red" />
</Trigger>
</Style.Triggers>
</Style>
</ListView.Style>
</ListView>
I write an ListView style example which worked for me. I tried it.
<Style TargetType="ListView">
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<ScrollViewer>
<ScrollViewer.Style>
<Style TargetType="ScrollViewer">
<Style.Triggers>
<Trigger Property="ComputedVerticalScrollBarVisibility" Value="Visible">
<Setter Property="Padding" Value="100"/>
</Trigger>
<Trigger Property="ComputedVerticalScrollBarVisibility" Value="Collapsed">
<Setter Property="Padding" Value="10"/>
</Trigger>
</Style.Triggers>
</Style>
</ScrollViewer.Style>
<ItemsPresenter />
</ScrollViewer>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a ComboBox with following xaml. Problem is I want the ComboxItem's background to be green when mouse over occurs but it dosen't work. I tried solution posted here ComboBox item color but it dosen't help.
I also tried editing the ComBoxItem's template like in the commented code. But none of the solutions work. Please help.
In the window resources I have the following items defined
<lib:MetroWindow.Resources>
<converter:EnumToVisibilityConverter
x:Key="EnumToVisibility"></converter:EnumToVisibilityConverter>
<x:Array
Type="{x:Type sys:String}"
x:Key="ImageFormatsArray">
<sys:String>Bmp</sys:String>
<sys:String>Png</sys:String>
<sys:String>Jpg</sys:String>
<sys:String>Tif</sys:String>
<sys:String>Gif</sys:String>
</x:Array>
</lib:MetroWindow.Resources>
<ComboBox
x:Name="CmbItems"
HorizontalAlignment="Left"
SelectedIndex="0"
ItemsSource="{StaticResource ImageFormatsArray}"
SelectedValue="{Binding SelectedImageFormat}">
<ComboBox.Resources>
<SolidColorBrush
x:Key="{x:Static SystemColors.HighlightBrushKey}"
Color="Green" />
</ComboBox.Resources>
<!--<ComboBox.ItemContainerStyle>
<Style
TargetType="{x:Type ComboBoxItem}">
<Setter
Property="Background"
Value="{StaticResource ControlsDarkBackgroundBrush}"></Setter>
<Setter
Property="Template">
<Setter.Value>
<ControlTemplate
TargetType="{x:Type ComboBoxItem}">
<ControlTemplate.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
Property="Background"
Value="{StaticResource ControlsDarkBackgroundBrush}"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>-->
<!--<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock
Text="{Binding}">
<TextBlock.Style>
<Style
TargetType="{x:Type TextBlock}">
<Style.Triggers>
<Trigger
Property="IsMouseOver"
Value="true">
<Setter
Property="Background"
Value="Black"></Setter>
</Trigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>-->
</ComboBox>
</StackPanel>
here is a working example, take what you need
<ComboBox.ItemContainerStyle>
<Style TargetType="{x:Type ComboBoxItem}" >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red" />
</Trigger>
</ControlTemplate.Triggers>
<StackPanel Background="{TemplateBinding Background}" >
<ContentPresenter></ContentPresenter>
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ComboBox.ItemContainerStyle>
<ComboBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding Name}"></TextBlock>
</DataTemplate>
</ComboBox.ItemTemplate>
I have these styles defined:
<Style x:Key="ImgButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Height" Value="30"></Setter>
</Style>
<Style x:Key="ImgButtonWithText" TargetType="{x:Type Button}" BasedOn="{StaticResource ImgButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Name="ButtonImage" Stretch="Uniform" Height="20" Width="20" Source="">
</Image>
<TextBlock Name="ButtonText" Margin="4,0" VerticalAlignment="Center" Text=""></TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
I want to create another style, LoginButtonWithText (shown below), that is based on ImgButtonWithText, and which sets the value of the Source property of the ButtonImage control in the ImgButtonWithText style. I want to do the same with the Text property of the ButtonText textblock.
<Style x:Key="LoginButtonWithText" TargetType="{x:Type Button}" BasedOn="{StaticResource ImgButtonWithText}">
<Setter Property="ToolTip" Value="Login"></Setter>
<Setter Property="IsDefault" Value="True"></Setter>
//How do I set the Image Source value and TextBlock Text value here?
</Style>
I found this question, but it doesn't appear to be quite exactly what I'm looking for. How do I change the value of child controls from an inherited style, or am I doing it all wrong?
It seems that what I want to do is not exactly possible, but I've done the next best thing in defining an image button style to use in all styles that inherit from from ImgButtonWithText:
<Style x:Key="ImgButton" TargetType="Button">
<Setter Property="Background" Value="Transparent"></Setter>
<Setter Property="Height" Value="30"></Setter>
</Style>
<Style x:Key="ButtonImage" TargetType="Image">
<Setter Property="Height" Value="20"></Setter>
<Setter Property="Width" Value="20"></Setter>
<Setter Property="Stretch" Value="Uniform"></Setter>
</Style>
<Style x:Key="ButtonText" TargetType="TextBlock">
<Setter Property="Margin" Value="4,0"></Setter>
<Setter Property="VerticalAlignment" Value="Center"></Setter>
</Style>
<Style x:Key="LoginButtonWithText" TargetType="{x:Type Button}" BasedOn="{StaticResource ImgButton}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Name="ButtonImage" Style="{StaticResource ButtonImage}" Source="../Images/login.png">
</Image>
<TextBlock Name="ButtonText" Style="{StaticResource ButtonText}" Text="Let's Go"></TextBlock>
</StackPanel>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
i have a base style and a style in wpf.
the base style is:
<Style x:Key="BaseTextBox" TargetType="{x:Type TextBox}">
<Setter Property="Background" Value="#DDFFDD" />
<Setter Property="MinWidth" Value="75" />
<Setter Property="behaviors:OCCInteraction.Triggers" Value="{StaticResource ResourceKey=validationTrigger}" />
<Style.Triggers>
<Trigger Property="Validation.HasError" Value="true">
<Setter Property="Background" Value="#FFDDDD"/>
<Setter Property="ToolTip" Value="{Binding Path=(Validation.Errors)[0].ErrorContent, RelativeSource={x:Static RelativeSource.Self}}" />
</Trigger>
</Style.Triggers>
</Style>
And the the specific style is:
<Style x:Key="EditableTextBox" TargetType="{x:Type TextBox}" BasedOn="{StaticResource ResourceKey=BaseTextBox}">
<Setter Property="Validation.ErrorTemplate">
<Setter.Value>
<ControlTemplate>
<StackPanel Orientation="Horizontal">
<Border BorderBrush="Red" BorderThickness="1" Padding="0" Margin="0">
<AdornedElementPlaceholder Margin="0"/>
</Border>
<TextBlock Text="test" />
<Image Style="{StaticResource ResourceKey=WarningImage}"/>
<TextBlock Text="{Binding Path=(Validation.Errors)[0].ErrorContent, RelativeSource={RelativeSource Mode=Self,AncestorLevel=2}}" />
</StackPanel>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Now i want to add the Validation Error Text to a textblock next to the image. But the Same Binding Path doesn't work. I've tried diferent bindings, but I can't figure out how to access the same binding like on the base style.
Thanks for help :)
Have you tried it without the AncestorLevel? You should be the same object.
You cannot use Mode=Self and AncestorLevel properties. Just use Mode=Self.
Ancestor level is used when you try to reach parent of that control in visual tree.
I have own style on listbox, I use in style data template and also control template.
In data template I create listbox item with some textboxes. In control template I want create a trigger which change foreground color of some textbox if listbox item is selected.
Here is some from style:
<Style x:Key="lbStyle" TargetType="{x:Type ListBox}">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<Grid Name="MainGrid">
<TextBlock Name="tbName" Text="{Binding Value.nick}"
Grid.Column="0" Grid.Row="0" Margin="2,2,2,2"
FontSize="13" FontWeight="Medium"></TextBlock>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="tbName" Property="Foreground" Value="Black"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Problem is, I get compile error : Cannot find the Trigger target tbName.
<Style TargetType="ListBox">
<Setter Property="ItemTemplate">
<Setter.Value>
<DataTemplate>
<TextBlock Text="{Binding}" Margin="2" FontSize="13" FontWeight="Medium">
<TextBlock.Style>
<Style BasedOn="{StaticResource {x:Type TextBlock}}" TargetType="TextBlock">
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ListBoxItem}, Path=IsSelected}" Value="True">
<Setter Property="Foreground" Value="Black"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
Your code of template is incorrect. You apply ListBoxItem template to ListBox template. Also, you didn't add anything inside ControlTemplate.
I have rewrited it:
<Style x:Key="itemStyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<ContentPresenter x:Name="itemContent"/>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected" Value="true">
<Setter TargetName="itemContent" Property="TextBlock.Foreground" Value="Red"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
ListBox with applied style:
<ListBox ItemContainerStyle="{StaticResource itemStyle}" />