Develop Reference

Why isnt my button changing colors on MouseOver?

So this is my XAML and for some reason it's not changing colors on mouseover, I added the triggers for it and I thought that would do it, when I hover over the button its not doing anything at all, why is that?
<Button Click="ButtonBase_OnClick" Margin="10,0,0,0" Style="{DynamicResource RoundedButtonStyle}" Width="100" Height="30" HorizontalAlignment="Left">
<Grid>
<Image IsHitTestVisible="False" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left" Source="Resources/addButton.png" />
<TextBlock IsHitTestVisible="False" Margin="20,0,0,1" VerticalAlignment="Center" Foreground="#9e9e9e">Add Product</TextBlock>
</Grid>
</Button>
<Window.Resources>
<Style x:Key="RoundedButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Border CornerRadius="5" Background="#2d2d30" BorderThickness="1" Padding="2">
<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Red"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>

Its not changing because you modified the control template of Button to:
<Border CornerRadius="5" Background="#2d2d30" BorderThickness="1" Padding="2"
Note the hard-coded background color. No matter what you do to the button's Background property it won't take effect since its not used. If you want to use that property in your template you need a TemplateBinding:
Background="{TemplateBinding Background}"
Then in the style set the default to your original value.
<Setter Property="Background" Value="#2d2d30"/>

How can I stretch a Border inside a Button?

I am writing a form for a WPF app, and I'd like to use the visual states that Button offers. So my XAML is like this right now:
<Button
Grid.Column="0"
Name="GenderMaleButton"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Border
Background="White"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock/>
</Border>
</Button>
But my Border is not filling my Button. How can I make the Border fill the Button? Or how can I use the visual states of the Button to affect the Border in another way than wrapping the Border inside the Button?
Or can I apply visual states to my Border? If so, how?
EDIT: the result I want is like this:
So a selected state (white border, blue bg), and a default state (blue border, white bg).

From a hard guess , I think you need to fill the border inside the button.Try the code below.Use ControlTemplate
<Button Grid.Column="0"
Name="GenderMaleButton"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Button.Template>
<ControlTemplate>
<Border Background="#6A6B9A"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock TextAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" FontWeight="Bold" Foreground="White" Text="Male"></TextBlock>
</Border>
</ControlTemplate>
</Button.Template>
</Button>

You should have set HorizontalContentAlignment and VerticalContentAlignment to Stretch.
<Button
Grid.Column="0"
Name="GenderMaleButton"
HorizontalContentAlignment="Stretch"
VerticalContentAlignment="Stretch"
BorderThickness="0"
Padding="0">
<Border
Background="White"
BorderThickness="2"
CornerRadius="5"
Padding="5"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<TextBlock/>
</Border>
</Button>

Try this:
<StackPanel Height="40" Orientation="Horizontal">
<StackPanel.Resources>
<Style x:Key="GenderButtonStyle" TargetType="{x:Type Button}">
<Setter Property="MinWidth" Value="100" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Border x:Name="InternalBorder"
CornerRadius="5"
Padding="5">
<TextBlock x:Name="InternalText"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="{TemplateBinding Content}" />
</Border>
<ControlTemplate.Triggers>
<Trigger Property="Tag" Value="Male">
<Setter TargetName="InternalBorder" Property="Background" Value="RoyalBlue" />
<Setter TargetName="InternalText" Property="Foreground" Value="White" />
</Trigger>
<Trigger Property="Tag" Value="Female">
<Setter TargetName="InternalBorder" Property="Background" Value="White" />
<Setter TargetName="InternalBorder" Property="BorderBrush" Value="RoyalBlue" />
<Setter TargetName="InternalBorder" Property="BorderThickness" Value="1,1,1,1" />
<Setter TargetName="InternalText" Property="Foreground" Value="RoyalBlue" />
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<!-- Whatever you want -->
</Trigger>
<Trigger Property="IsPressed" Value="True">
<!-- Whatever you want -->
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</StackPanel.Resources>
<Button x:Name="MaleButton"
Content="Male"
Style="{StaticResource GenderButtonStyle}"
Tag="Male" />
<Button x:Name="FemaleButton"
Margin="5,0,0,0"
Content="Female"
Style="{StaticResource GenderButtonStyle}"
Tag="Female" />
</StackPanel>
To explain what I've done; I placed two buttons inside a horizontal <StackPanel/> and in its resources subtag I've made a Button Style that can then be assigned to any button you want.
Inside that style I've cracked open the Template and built my own small one that does what you described.
Generally, if a control isn't looking quite the way you want as-is, the best thing to do is open up the template it's made of and make your own.
Like this, you can now define what it should look like when you mouse-over or focus it or press it.

Adjust Selected ListViewItem TextBlock Style

I am having a strange issue. I am not sure if this is a bug, or if I am simply misunderstanding something as I am fairly new to WPF (Probably the latter).
In my project, I have a ListView that displays items in a similar fashion to that seen of Windows Explorer using Icon view. I have outlined a control template that consists of a an Image element, and a TextBlock element below it. My goal is to adjust the maximum height of the TextBlock when the ListViewItem is selected. This is so the name of the Items will adjust from being trimmed with an ellipsis to showing the full name of the item.
When the item is selected however, instead of adjusting the maximum height of only the selected item's TextBlock, it adjusts all TextBlocks for each item whether it is actively selected or not.
I have researched for an answer, but have not found anything similar to this particular issue. This link is a similar concept, but without my problem.
WPF - ListView Item on Selected change Font size
Some of my other methods have consisted of one ControlTemplate with triggers for the style changes, or ItemContainerStyle instead of explicitly a ControlTemplate, which all seemed to give the same undesired result.
How can I achieve this functionality? Is it possible with ControlTemplate?
Here is some of my XAML code:
ListView
<ListView x:Name="ItemViewer">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Margin="10"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Margin" Value="10"/>
<Setter Property="Template" Value="{StaticResource ListViewItemNormal}"/>
<Style.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="True"/>
<Condition Property="Selector.IsSelectionActive" Value="True"/>
</MultiTrigger.Conditions>
<Setter Property="Template" Value="{StaticResource ListViewItemSelected}"/>
</MultiTrigger>
</Style.Triggers>
</Style>
</ListView.ItemContainerStyle>
</ListView>
ControlTemplates
<ControlTemplate x:Key="ListViewItemNormal" TargetType="{x:Type ListViewItem}">
<Border x:Name="ItemBoxBorder" Background="Transparent">
<Grid HorizontalAlignment="Left" MinHeight="90"
Margin="5"
MaxWidth="90"
Width="90"
x:Name="ItemBox">
<StackPanel>
<Image HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{StaticResource NewImage}"
Width="64" Height="64"/>
<TextBlock x:Name="ItemDescription"
Text="{Binding Path=Name}"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
TextWrapping="Wrap"
MaxWidth="90"
MaxHeight="30"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
<Grid.ToolTip>
<ToolTip Content="{Binding Path=Name}"/>
</Grid.ToolTip>
</Grid>
</Border>
<ControlTemplate.Triggers>
<MultiTrigger>
<MultiTrigger.Conditions>
<Condition Property="IsSelected" Value="False"/>
<Condition Property="IsMouseOver" Value="True"/>
</MultiTrigger.Conditions>
<Setter TargetName="ItemBoxBorder" Property="Background" Value="{StaticResource HighlightMouseHoverColorBrush}"/>
</MultiTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<ControlTemplate x:Key="ListViewItemSelected" TargetType="{x:Type ListViewItem}">
<Border x:Name="ItemBoxBorder" Background="{StaticResource SelectedItemBrush}"
BorderBrush="{StaticResource HighlightBorderColorBrush}"
BorderThickness="1">
<Grid HorizontalAlignment="Left" MinHeight="90"
Margin="5"
MaxWidth="90"
Width="90"
x:Name="ItemBox">
<StackPanel>
<Image HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{StaticResource NewImage}"
Width="64" Height="64"/>
<TextBlock x:Name="ItemDescription"
Text="{Binding Path=Name}"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
TextWrapping="Wrap"
MaxWidth="90"
MaxHeight="125"
TextTrimming="CharacterEllipsis"/>
</StackPanel>
<Grid.ToolTip>
<ToolTip Content="{Binding Path=Name}"/>
</Grid.ToolTip>
</Grid>
</Border>
</ControlTemplate>
EDIT
Here is an example of the issue with ms_dos's implementation.
This image shows I have the item with a short description selected. This is the height all items should remain if they are not selected.
In this image, you'll see the item with the long description is selected. However, both items extend their height, but only the selected one should grow.

You don't need two separate control templates for this. Just take the ItemContainerStyle property of the ListView and use a control template like this:
<ListView x:Name="ItemViewer">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Margin="10" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border x:Name="ItemBoxBorder"
Background="Green"
BorderThickness="1"
VerticalAlignment="Top">
<Grid HorizontalAlignment="Left"
MinHeight="90"
Margin="5"
MaxWidth="90"
Width="90"
x:Name="ItemBox">
<StackPanel>
<Image HorizontalAlignment="Center"
VerticalAlignment="Top"
Width="64"
Height="64" />
<TextBlock x:Name="ItemDescription"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
TextWrapping="Wrap"
Text="{Binding}"
MaxWidth="90"
MaxHeight="125"
TextTrimming="CharacterEllipsis" />
</StackPanel>
<Grid.ToolTip>
<ToolTip Content="{Binding Path=Name}" />
</Grid.ToolTip>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSelected"
Value="true">
<Setter TargetName="ItemBoxBorder"
Property="Background"
Value="Red" />
<Setter TargetName="ItemDescription"
Property="TextElement.FontSize"
Value="20" />
<Setter TargetName="ItemBoxBorder"
Property="Height"
Value="135" />
</Trigger>
<Trigger Property="IsSelected"
Value="false">
<Setter TargetName="ItemBoxBorder"
Property="Height"
Value="90" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListView.ItemContainerStyle>
</ListView>
Take a look at the ControlTemplate.Triggers section. Basically you use the Trigger property to control which property the trigger should handle... in our case the IsSelected from the ListView. And with the Setter you define the property and the value for the changes of the ListViewItem control. The TargetName of the Setter refers to the x:Name of the control which you define in the ControlTemplate section.
I hope this example helps you with your problem!
Greets
ms_dos

CheckComboBox : How to prevent a combobox from closing after a selection is clicked?

I've got a combobox and it's populated with a bunch of checkboxes. I wish the user to be able to click multiple times before the combobox closes (or is closed by the user themselves). The problems right now is that each time a checkbox is clicked, the combobox closes, forcing the user who wants to select multiple options to re-open it several times.
I've found other questions on the same subject but those apply to Silverlight, Qt etc. comparing the tags.
I've tried setting StayOpenOnEdit but that didn't do the trick. As far I could see, there's no property addressing my issue. That creates a suspicion that I might be barning up the wrong component all together.
How do I prevent the combobox to close automatically after a click in a checkbox in it?
Is there a more suitable component for such task and, if so, what's its name?
Please note that even if the answer to #2 is "yes", I'm still curious of #1 for purely academic reasons.
I've played with toggle button and list box, as someone suggested in a post. However, the that led only to an always fully shown list of all the checkboxes with some greyish thing behind it (which I'm assuming is the toggler). Perhaps I did something less clever in the mark-up.
<ToggleButton HorizontalAlignment="Left"
Margin="550,62,0,0"
VerticalAlignment="Top"
Width="100">
<ListBox x:Name="listBox1"
HorizontalAlignment="Left"
Height="100"
VerticalAlignment="Top" Width="100">
<CheckBox x:Name="checkBox3" Content="CheckBox"/>
<CheckBox x:Name="checkBox4" Content="CheckBox"/>
</ListBox>
</ToggleButton>
The point is to achieve something like this but it needs to be a standard WPF control (the concatenated line of all selected items is nice but not a must). Also, I've read the complaints that the binding and handling is not fully developed yet and I feel a bit suspicious.

Using Exapander Control you can achieve multple item selection without closing popup after single selection.
For understanding please run this code separately.
xaml
<Window.Resources>
<ControlTemplate x:Key="ComboboxToggleButton" TargetType="{x:Type ToggleButton}">
<Grid Background="{Binding Background,RelativeSource={RelativeSource AncestorType={x:Type ComboBox}}}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="35" />
</Grid.ColumnDefinitions>
<Border x:Name="Border" Grid.ColumnSpan="2" Background="Transparent" BorderBrush="Black" BorderThickness="{Binding BorderThickness,RelativeSource={RelativeSource TemplatedParent}}"/>
<Path x:Name="Arrow" Grid.Column="1" Opacity="1" Stroke="Black" StrokeThickness="1.5" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 6 6 L 12 0" />
<Path x:Name="Arrow_checked" Opacity="0" Grid.Column="1" Fill="Black" Stroke="Black" StrokeThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" Data="M 0 0 L 6 6 L 12 0 Z" />
<ContentPresenter TextElement.FontFamily="Segoe Ui Dark" TextElement.FontSize="18" TextElement.Foreground="Black" VerticalAlignment="Center" Grid.Column="0" Margin="10,0,0,0" HorizontalAlignment="Left" RecognizesAccessKey="True" SnapsToDevicePixels="True" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsMouseOver" Value="true">
<Setter TargetName="Border" Property="Background" Value="Gray" />
<Setter TargetName="Border" Property="BorderThickness" Value="1.2" />
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Opacity" Value="1" TargetName="Arrow"/>
<Setter Property="Opacity" Value="0" TargetName="Arrow_checked"/>
</Trigger>
<Trigger Property="ToggleButton.IsChecked" Value="true">
<Setter Property="Opacity" Value="0" TargetName="Arrow"/>
<Setter Property="Opacity" Value="1" TargetName="Arrow_checked"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter TargetName="Border" Property="Background" Value="Gray" />
<Setter TargetName="Border" Property="BorderBrush" Value="White" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
<Style TargetType="{x:Type Expander}">
<Setter Property="FontFamily" Value="Segoe Ui Dark"></Setter>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="MaxHeight" Value="200"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Expander}">
<DockPanel>
<ToggleButton x:Name="HeaderSite" Height="35" Background="{TemplateBinding Background}" ContentTemplate="{TemplateBinding HeaderTemplate}" ContentTemplateSelector="{TemplateBinding HeaderTemplateSelector}" Content="{TemplateBinding Header}" DockPanel.Dock="Top" Foreground="Black" FontStyle="{TemplateBinding FontStyle}" FontFamily="Segoe UI Dark"
IsChecked="{Binding IsExpanded, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ComboboxToggleButton}" />
<Border BorderThickness="0,4.5,0,0" BorderBrush="Transparent">
<Border x:Name="bod" BorderBrush="Transparent" SnapsToDevicePixels="True" BorderThickness="1">
<ContentPresenter x:Name="ExpandSite" Focusable="false" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Visibility="Collapsed" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Border>
</Border>
</DockPanel>
<ControlTemplate.Triggers>
<Trigger Property="IsExpanded" Value="true">
<Setter Property="Visibility" TargetName="ExpandSite" Value="Visible"/>
<Setter Property="BorderBrush" TargetName="bod" Value="Black"/>
</Trigger>
<Trigger Property="IsEnabled" Value="false">
<Setter Property="Foreground" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="itemstyle" TargetType="{x:Type ListBoxItem}">
<Setter Property="SnapsToDevicePixels" Value="true" />
<Setter Property="OverridesDefaultStyle" Value="true" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListBoxItem">
<Grid x:Name="Border" Height="40" SnapsToDevicePixels="true">
<Grid.Background>
<SolidColorBrush Color="Transparent" />
</Grid.Background>
<ContentPresenter Name="cmb_name" TextElement.FontFamily="Segoe Ui Dark" TextElement.FontSize="18" TextElement.Foreground="Black" Margin="10,0,0,0" VerticalAlignment="Center"></ContentPresenter>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter TargetName="Border" Property="Background" Value="Gray"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="{DynamicResource customBlueBrush}" BorderThickness="1" Margin="1,2,2,2" >
<Rectangle Fill="{DynamicResource customBlueBrush}" Opacity="0.1"></Rectangle>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
<Style TargetType="CheckBox" >
<Setter Property="SnapsToDevicePixels" Value="True"></Setter>
<Setter Property="OverridesDefaultStyle" Value="True"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<Grid x:Name="ab" Background="Transparent">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle VerticalAlignment="Center" Height="20" Width="20" Fill="White" HorizontalAlignment="Left"></Rectangle>
<Grid x:Name="checkGrid" VerticalAlignment="Center" Height="20" Width="20" Background="Black" HorizontalAlignment="Left">
<Viewbox Height="13" Width="13">
<Path x:Name="Check" SnapsToDevicePixels="True" UseLayoutRounding="True" Width="18.7969" Height="16.3094" Canvas.Left="0" Canvas.Top="1.52588e-005" Stretch="Fill" Fill="White" Data="F1 M 0.731262,8.75935L 0.106262,8.08437C 0.0354614,7.9948 0,7.8979 0,7.79375C 0,7.66875 0.0479736,7.5573 0.143799,7.45937L 1.94067,5.77187C 2.02606,5.69893 2.12708,5.66249 2.24377,5.66249C 2.30212,5.66249 2.36096,5.67397 2.42035,5.69685C 2.47974,5.71977 2.52814,5.75417 2.56567,5.79997L 7.5188,11.1406L 16.0438,0.165604C 16.1417,0.055191 16.2584,1.52588e-005 16.3938,1.52588e-005C 16.4979,1.52588e-005 16.5896,0.0322723 16.6688,0.0968475L 18.6313,1.60939C 18.6709,1.64272 18.7084,1.69011 18.7438,1.75154C 18.7792,1.813 18.7969,1.8698 18.7969,1.92189C 18.7969,2.03435 18.7646,2.1385 18.7,2.23439L 7.74377,16.3094L 0.731262,8.75935 Z " />
</Viewbox>
</Grid>
<Grid Background="Transparent" Grid.Column="1" IsHitTestVisible="True" HorizontalAlignment="Stretch">
<TextBlock VerticalAlignment="Center" FontSize="18" FontFamily="Segoe Ui Dark" Foreground="Black" TextTrimming="CharacterEllipsis">
<ContentPresenter></ContentPresenter>
</TextBlock>
</Grid>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter Property="Opacity" Value="1" TargetName="Check"></Setter>
</Trigger>
<Trigger Property="IsChecked" Value="False">
<Setter Property="Opacity" Value="0" TargetName="Check"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="FocusVisualStyle">
<Setter.Value>
<Style TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderBrush="{DynamicResource customBlueBrush}" SnapsToDevicePixels="True" BorderThickness="1" Margin="-5,1,3,1" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="gd" >
<Expander Width="500">
<Expander.Header>
<ListBox Background="Transparent" IsHitTestVisible="False" BorderBrush="Transparent" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Disabled" BorderThickness="0" ItemsSource="{Binding ElementName=lst,Path=SelectedItems}">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel Orientation="Horizontal"></WrapPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding ContentData}"/>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Expander.Header>
<Expander.Content>
<ListBox Background="Transparent" ItemContainerStyle="{StaticResource itemstyle}" HorizontalContentAlignment="Stretch" x:Name="lst" SelectionMode="Multiple">
<ListBox.ItemTemplate>
<DataTemplate>
<CheckBox x:Name="checkBox" IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsSelected}" Content="{Binding ContentData}"></CheckBox>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Expander.Content>
</Expander>
</Grid>
c# code
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
ObservableCollection<Customer> custdata = new ObservableCollection<Customer>();
custdata.Add(new Customer() { ContentData = "content1" });
custdata.Add(new Customer() { ContentData = "content2" });
custdata.Add(new Customer() { ContentData = "content3" });
custdata.Add(new Customer() { ContentData = "content4" });
custdata.Add(new Customer() { ContentData = "content5" });
custdata.Add(new Customer() { ContentData = "content6" });
lst.ItemsSource = custdata;
}
}
public class Customer
{
public string ContentData { get; set; }
}
Result

Konrad,
I also decided to use a ComboBox in this manner, because the code was just dead simple. The easiest way I have found to keep the ComboBox popup open is to wire-up to the PreviewMouseDown event of the control in the ComboBox's item template. handle the behavior yourself, and then mark the mouse event handled. Works great for me. In the sample below, each object in FilterItems is a simple view model with a Text property and an IsChecked property.
<ComboBox IsEditable="True" IsReadOnly="False" ItemsSource="{Binding FilterItems}">
<ComboBox.ItemTemplate>
<DataTemplate>
<CheckBox IsChecked="{Binding IsChecked}" Content="{Binding Text}"
PreviewMouseDown="FilterComboBox_PreviewMouseDown"/>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
And then my event handler is:
private void FilterComboBox_PreviewMouseDown(object sender, MouseButtonEventArgs e)
{
var cb = sender as CheckBox;
if (cb != null)
{
cb.IsChecked = !cb.IsChecked;
e.Handled = true;
}
}

How do I access an element inside a style programmatically?

I have a WPF button style below:
<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="{Binding Width}" Height="{Binding Height}">
<Border Name="container" Background="{Binding Background}" CornerRadius="{Binding CornerRadius}">
<TextBlock Margin="10" FontFamily="Arial" FontWeight="Bold" TextAlignment="Left" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" FontSize="{Binding TextSize}" Foreground="White" Text="{Binding Text}" TextWrapping="Wrap"/>
</Border>
<Border Name="overlay" Background="Transparent" CornerRadius="{Binding CornerRadius}" />
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="overlay" Property="Opacity" Value="0.6" />
<Setter TargetName="overlay" Property="Background" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is that, although all of the buttons of my application have the same style, some of them need to have a border around it. Therefore I would like to know if it is possible to access the container border of my style to set its thickness and color? If so how can I do this?
Edit:
I've mixed the suggestions of madd0 and Josh and created a DataTrigger inside my style with a binding to a property that tells me if the button should or should not have a border.
The final code is below:
<Style x:Key="myButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid Width="{Binding Width}" Height="{Binding Height}">
<Border Name="container" Background="{Binding Background}" CornerRadius="{Binding CornerRadius}">
<TextBlock Margin="10" FontFamily="Arial" FontWeight="Bold" TextAlignment="Left" HorizontalAlignment="Left" VerticalAlignment="Top" Width="Auto" FontSize="{Binding TextSize}" Foreground="White" Text="{Binding Text}" TextWrapping="Wrap"/>
</Border>
<Border Name="overlay" Background="Transparent" CornerRadius="{Binding CornerRadius}" />
</Grid>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding Path=HasBorder}" Value="true">
<Setter TargetName="container" Property="BorderThickness" Value="{Binding BorderThickness}" />
<Setter TargetName="container" Property="BorderBrush" Value="{Binding BorderBrush}" />
</DataTrigger>
<Trigger Property="IsPressed" Value="True">
<Setter TargetName="overlay" Property="Opacity" Value="0.6" />
<Setter TargetName="overlay" Property="Background" Value="Black" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Thank you all for your help,
Komyg

I think if you extend the Button class and give it a new boolean DependencyProperty, essentially all you need to do is give your Border a name, then in ControlTemplate.Triggers, Trigger off that boolean property to make the border as you need it in your special cases.
It would be similar to what you already have with the IsPressed ControlTemplate trigger.

I don't think you'll really need to access your control template properties. Since Button already has border properties, you ought to just set those properties on the button directly. Then, add the border to your ControlTemplate, binding its properties to that of the button.