i have a ListBox which I fill with custom items. I want to detect a MouseOver event from a ListBoxItem inside the item in order to change visibility of a button. I have checked most of the answers on StackOverflow, the following solution was what I was looking for, but it doesn't work.
This is a code snippet from my ContactsView:
<ListBox ScrollViewer.CanContentScroll="False" VerticalContentAlignment="Top" ScrollViewer.ScrollChanged="ListBox_OnScrollChanged" BorderThickness="0,0,0,0" Margin="0,0,0,0" Padding="0" BorderBrush="{StaticResource ResourceKey=PrimaryColor}" Name="ListBox" ItemsSource="{Binding ListBoxItemsSource}" HorizontalContentAlignment="Stretch">
<i:Interaction.Triggers>
<events:RoutedEventTrigger RoutedEvent="ScrollViewer.ScrollChanged">
<i:InvokeCommandAction Command="{Binding Path=ListBoxScrollChangedCommand}" />
</events:RoutedEventTrigger>
<i:EventTrigger EventName="Loaded">
<i:InvokeCommandAction Command="{Binding Path=ListBoxLoadedCommand}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="Padding" Value="0"/>
<Setter Property="BorderThickness" Value="0"/>
<Style.Triggers>
<Trigger Property="ListBoxItem.IsMouseOver" Value="True">
<Setter Property="Background" Value="{StaticResource PrimaryColor}"/>
</Trigger>
<Trigger Property="ListBoxItem.IsMouseOver" Value="False">
<Setter Property="Background" Value="Transparent"/>
</Trigger>
</Style.Triggers>
</Style>
</ListBox.ItemContainerStyle>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel>
<!-- Custom item -->
<items:ItemCorporateContact Value="{Binding Path=., Mode=TwoWay}" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<Separator Height="1" Margin="0" Background="#ececec" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
And I have been trying to detect the event this way (code from a custom item that I add to a ListBox):
<Button Name="StartCallButton" VerticalAlignment="Center" Background="Red" Margin="10" HorizontalAlignment="Left">
<Button.Content>
<Image Source="{StaticResource PhoneIconBitmap}"></Image>
</Button.Content>
<Button.Style>
<Style TargetType="{x:Type Button}">
<Setter Property="Visibility" Value="Hidden" />
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}},Path=IsMouseOver}" Value="True">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
Any help will be greatly appreciated.
I had been searching for the same thing. Although the answer is provided in the question, but to specify the answer more clearly, following is the code that works for me.
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel x:Name="ViewTypeStackPanel" Orientation="Horizontal">
<Border BorderThickness="2,0,0,0" Visibility="{Binding Path=IsSelected, Converter={StaticResource BooleanToVisibilityConverterInstance}}" BorderBrush="Blue"/>
<Image Height="32" Width="32">
<Image.Style>
<Style TargetType="Image">
<Setter Property="Source" Value="{Binding Path=ImagePath}"/>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ListBoxItem}}, Path=IsMouseOver}" Value="True">
<Setter Property="Source" Value="{Binding Path=ImagePathHover}"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Image.Style>
</Image>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
Related
I have a WPF TreeView that I customized visually looking like this:
I defined an EventTrigger to react on clicks:
<TreeView>
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseLeftButtonUp">
<i:InvokeCommandAction Command="{Binding OpenPartListCommand}" CommandParameter="{Binding ElementName=PartsTreeView, Path=SelectedItem}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
<TreeView.Resources>
<Style TargetType="{x:Type TreeViewItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TreeViewItem" >
<Grid Margin="6,4">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Border Name="Bd"
Background="{Binding Background}"
BorderBrush="Black"
BorderThickness="1.2"
CornerRadius="0"
MinHeight="35"
Padding="5"
SnapsToDevicePixels="True"
Margin="{Binding Path=Margin}" >
<Grid>
<Expander Name="Exp" IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
<Expander.Header>
<ContentPresenter ContentSource="Header"
Width="{Binding Path=ActualWidth, ElementName=PartsTreeView, Mode=OneWay, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE-80}" />
</Expander.Header>
<ItemsPresenter />
</Expander>
<ContentPresenter Name="CntPres"
ContentSource="Header"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Visibility="Collapsed"
Width="{Binding Path=ActualWidth, ElementName=PartsTreeView, Mode=OneWay, Converter={StaticResource MathConverter}, ConverterParameter=#VALUE-80}"
/>
</Grid>
</Border>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="TreeViewItem.HasItems" Value="false">
<Setter
TargetName="Exp"
Property="Visibility"
Value="Collapsed" />
<Setter
TargetName="CntPres"
Property="Visibility"
Value="Visible" />
</Trigger>
<Trigger Property="TreeViewItem.Name" Value="IsSpecial">
<Setter Property="Background" TargetName="Bd" Value="#FFC3AF"/>
</Trigger>
<Trigger Property="TreeViewItem.Name" Value="IsNotSpecial">
<Setter Property="Background" TargetName="Bd" Value="#8BADC5"/>
</Trigger>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" TargetName="Bd" Value="#FFF0EA"/>
</Trigger>
<Trigger Property="IsFocused" Value="True">
<Setter Property="Background" TargetName="Bd" Value="#FFF0EA"/>
</Trigger>
<Trigger Property="IsSelected" Value="True">
<Setter TargetName="Bd" Property="Background" Value="#FFF0EA"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<ItemsPanelTemplate.Resources>
</ItemsPanelTemplate.Resources>
<StackPanel IsItemsHost="True" />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
</TreeView.Resources>
</TreeView>
The problem is that clicking on the root element "Ausführungsvorschrift" only expands the tree but the event is not fired. It fires when clicking on sub elements though and it fires when clicking inside the border. But the header does not fire anything.
Try to add triggers for the Expanded and Collapsed events to the Expander element in the template:
<Expander Name="Exp" IsExpanded="{TemplateBinding TreeViewItem.IsExpanded}">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Expanded">
<i:InvokeCommandAction Command="{Binding DataContext.OpenPartListCommand, RelativeSource={RelativeSource AncestorType=TreeView}}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}}" />
</i:EventTrigger>
<i:EventTrigger EventName="Collapsed">
<i:InvokeCommandAction Command="{Binding DataContext.OpenPartListCommand, RelativeSource={RelativeSource AncestorType=TreeView}}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}}" />
</i:EventTrigger>
</i:Interaction.Triggers>
<Expander.Header>
<ContentPresenter ContentSource="Header" />
</Expander.Header>
<ItemsPresenter />
</Expander>
I have the following WPF ListView where I change the template depending on the property ChangeView in my class MyItemsClass.
<ListView x:Name="MyListView" ItemsSource="{Binding}">
<ListView.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type myClass:MyItemsClass}}, Path=ChangeView}" Value="True">
<Setter Property="ListView.ItemsPanel" Value="{StaticResource largeTemplate}"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type myClass:MyItemsClass}}, Path=ChangeView}" Value="False">
<Setter Property="ListView.ItemsPanel" Value="{StaticResource smallTemplate }" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
<ItemsPanelTemplate x:Key="largeTemplate">
<WrapPanel Orientation="Horizontal" IsItemsHost="True">
<WrapPanel.Resources>
<BooleanToVisibilityConverter x:Key="BoolToVisibility"/>
<HierarchicalDataTemplate DataType="{x:Type local:MyData}">
<Button Command="{Binding}" Visibility="{Binding RelativeSource={RelativeSource Self}, Path=IsEnabled, Converter={StaticResource BoolToVisibility}}">
<Image Height="100" Width="100" Source="{Binding Path=MyImage}"/>
</Button>
</HierarchicalDataTemplate>
</WrapPanel.Resources>
</WrapPanel>
</ItemsPanelTemplate>
smallTemplate is the same as largeTemplate XAML only with different sizes of iamge.
Now I want to 'skin' my ListView with an existing style of ListView so if I do the following it works
<ListView x:Name="MyListView" ItemsSource="{Binding}" ItemContainerStyle="{DynamicResource MyStyle}">
</ListView>
<Style x:Key="MyStyle" TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource ListViewItemStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
So now I am attempting to add in the original triggers like so:
<ListView x:Name="MyListView" ItemsSource="{Binding}" ItemContainerStyle="{DynamicResource MyStyle}">
</ListView>
<Style x:Key="MyStyle" TargetType="{x:Type ListViewItem}" BasedOn="{StaticResource ListViewItemStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type myClass:MyItemsClass}}, Path=ChangeView}" Value="True">
<Setter Property="ListView.ItemsPanel" Value="{StaticResource largeTemplate}"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type myClass:MyItemsClass}}, Path=ChangeView}" Value="False">
<Setter Property="ListView.ItemsPanel" Value="{StaticResource smallTemplate }" />
</DataTrigger>
</Style.Triggers>
</Style>
But now my DataTriggers do not work - the ListView.ItemsPanel does not change when my class variable is changed. How canI get this to work?
Try this instead:
<ListView x:Name="MyListView" ItemsSource="{Binding}" Style="{DynamicResource MyStyle}">
</ListView>
<Style x:Key="MyStyle" TargetType="{x:Type ListView}" BasedOn="{StaticResource ListViewStyle}">
<Setter Property="ItemTemplate">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<ContentPresenter />
</ControlTemplate>
</Setter.Value>
</Setter>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type myClass:MyItemsClass}}, Path=ChangeView}" Value="True">
<Setter Property="ListView.ItemsPanel" Value="{StaticResource largeTemplate}"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type myClass:MyItemsClass}}, Path=ChangeView}" Value="False">
<Setter Property="ListView.ItemsPanel" Value="{StaticResource smallTemplate }" />
</DataTrigger>
</Style.Triggers>
</Style>
I changed your style to target the Style of the ListView itself, rather than its ItemContainerStyle property, and then I changed <Setter Property="Template"> to <Setter Property="ItemTemplate"> so that it will only override the template for your items, rather then overriding the template for the whole ListView.
So you have a working ListView style? Why don't you simply set the ItemContainerStyle property of it to your "MyStyle"?:
<ListView x:Name="MyListView" ItemsSource="{Binding}" ItemContainerStyle="{DynamicResource MyStyle}">
<ListView.Style>
<Style>
<Style.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type myClass:MyItemsClass}}, Path=ChangeView}" Value="True">
<Setter Property="ListView.ItemsPanel" Value="{StaticResource largeTemplate}"/>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type myClass:MyItemsClass}}, Path=ChangeView}" Value="False">
<Setter Property="ListView.ItemsPanel" Value="{StaticResource smallTemplate }" />
</DataTrigger>
</Style.Triggers>
</Style>
</ListView.Style>
</ListView>
MyStyle applies to a ListViewItem and not to a ListView so this should work.
Or what is the "skin" that you are trying to apply?
I have a list box with an ItemContainerStyle which describes the style of each element in the listbox. Like looks something like this:
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" BasedOn="{StaticResource MyStyle}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="0,0,0,1" BorderBrush="#1f000000" Padding="16 8">
<Button Command={Binding MyCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=lists:MyControl}}}" />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
The thing is that, when I click this button I want to know the SelectedItem in the listbox, which is bound in my ViewModel. This selection doesnt trigger unless I select the item first.
Any Ideas?
You need to force the IsSelected with a trigger:
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True"/>
</Trigger>
</Style.Triggers>
Here is a full working example:
<ListBox x:Name="ListBox" ItemsSource="{Binding SomeList}" SelectedItem="{Binding SelectedListElement, Mode=TwoWay}" IsSynchronizedWithCurrentItem="True" >
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem" >
<Style.Triggers>
<Trigger Property="IsKeyboardFocusWithin" Value="True">
<Setter Property="IsSelected" Value="True"/>
</Trigger>
</Style.Triggers>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Border BorderThickness="0,0,0,1" BorderBrush="#1f000000" Padding="16 8">
<Button Command="{Binding RelativeSource={RelativeSource AncestorType={x:Type ListBox}},
Path=DataContext.Run}" CommandParameter="{Binding}" Height="30" Width="100"/>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>
I have two buttons with commands bound to them.
If the user hovers over a button1 it should highlight (border color changes)
textbox1 and combobox1 only when the button1 is in disabled state.
If the user hovers over a button2 it should highlight (border color changes)
textbox2, textbo3 and combobox1 only when the button2 is in disabled state.
And finally unhighlight the controls on mouseleave.
Is this possible with pure XAML, because the style should be applied to other controls, not to the button itself who triggers the event and only when conditions are met?
And how could this be done?
I found many examples on SO, but they do not apply to this specific case.
I started to do this programmatically:
<Button Name="btnGenerateHash"
IsEnabled="{Binding VM.IsGenerateButtonEnabled}"
Command="{Binding GenerateCommand}"
Content="{Binding VM.GenerateHashButtonLabel}" Width="160"
Grid.Row="1" Grid.Column="1" HorizontalAlignment="Right" Margin="10" >
<i:Interaction.Triggers>
<i:EventTrigger EventName="MouseEnter">
<i:InvokeCommandAction Command="{Binding HighlightFieldsCommand}" CommandParameter="{Binding Source='generate,enter'}"></i:InvokeCommandAction>
</i:EventTrigger>
<i:EventTrigger EventName="MouseLeave">
<i:InvokeCommandAction Command="{Binding HighlightFieldsCommand}" CommandParameter="{Binding Source='generate,leave'}"></i:InvokeCommandAction>
</i:EventTrigger>
</i:Interaction.Triggers>
</Button>
Modified version:
<StackPanel Orientation="Vertical">
<CheckBox
x:Name="EnableButton1CheckBox"
Content="Enable Button1"
Margin="4"
/>
<Grid Margin="4">
<Button Click="button1_Click"
Content="Button1"
x:Name="button1"
IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}">
</Button>
<Border
x:Name="Button1MouseDetector"
Background="Transparent"
>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" Value="MouseOver" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<!--
When button1 is disabled, it can't receive mouse events, so we create a
coextensive control that's explicitly transparent. If it merely had no
background specified, it wouldn't get mouse events either.
-->
</Grid>
<Grid Margin="4">
<Button
Content="Button2"
x:Name="button2"
IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}">
</Button>
<Border
x:Name="Button2MouseDetector"
Background="Transparent"
>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" Value="MouseOver" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
<!--
When button1 is disabled, it can't receive mouse events, so we create a
coextensive control that's explicitly transparent. If it merely had no
background specified, it wouldn't get mouse events either.
-->
</Grid>
<TextBox
Text="tb1"
x:Name="tb1"
Margin="4"
>
<TextBox.Style>
<Style TargetType="TextBox" BasedOn="{StaticResource {x:Type TextBox}}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, ElementName=Button1MouseDetector}"
Value="MouseOver"
/>
<Condition
Binding="{Binding IsEnabled, ElementName=button1}"
Value="False"
/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" Value="Red" />
</MultiDataTrigger>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, ElementName=Button2MouseDetector}"
Value="MouseOver"
/>
<Condition
Binding="{Binding IsEnabled, ElementName=button2}"
Value="False"
/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" Value="Green" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</TextBox.Style>
</TextBox>
</StackPanel>
This is partial, but illustrates how to
Expose mouseover state of a possibly disabled control to XAML style triggers on other controls, and
How those other XAML triggers can do stuff only when two different conditions are both true.
XAML:
<StackPanel Orientation="Vertical">
<CheckBox
x:Name="EnableButton1CheckBox"
Content="Enable Button1"
Margin="4"
/>
<Grid
Margin="4"
>
<Button
Content="Button1"
x:Name="button1"
IsEnabled="{Binding IsChecked, ElementName=EnableButton1CheckBox}"
>
</Button>
<!--
When button1 is disabled, it can't receive mouse events, so we create a
coextensive control that's explicitly transparent. If it merely had no
background specified, it wouldn't get mouse events either.
-->
<Border
x:Name="Button1MouseDetector"
Background="Transparent"
>
<Border.Style>
<Style TargetType="Border">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Tag" Value="MouseOver" />
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
</Border>
</Grid>
<Button
Content="Button2"
x:Name="button2"
Margin="4"
>
<Button.Style>
<Style TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Style.Triggers>
<MultiDataTrigger>
<MultiDataTrigger.Conditions>
<Condition
Binding="{Binding Tag, ElementName=Button1MouseDetector}"
Value="MouseOver"
/>
<Condition
Binding="{Binding IsEnabled, ElementName=button1}"
Value="False"
/>
</MultiDataTrigger.Conditions>
<Setter Property="BorderBrush" Value="Red" />
</MultiDataTrigger>
</Style.Triggers>
</Style>
</Button.Style>
</Button>
</StackPanel>
That's my code:
<Window x:Class="WpfTests.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<Thickness x:Key="tasksMargin">0,10,0,0</Thickness>
</Window.Resources>
<Grid>
<DockPanel HorizontalAlignment="Left">
<!--<Border Padding="15">-->
<GroupBox>
<GroupBox.Header>
Database Tasks
</GroupBox.Header>
<StackPanel Width="Auto" >
<StackPanel.Resources>
<Style TargetType="RadioButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="RadioButton">
<ToggleButton IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
BorderThickness="2" BorderBrush="Yellow" Background="White"/>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter Property="Content" Value="different txt" />
</Trigger>
<Trigger Property="ToggleButton.IsPressed" Value="True">
<Setter Property="Content" Value="different text" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="Margin" Value="5">
</Setter>
</Style>
</StackPanel.Resources>
<RadioButton GroupName="Group1" x:Name="button1">Option1</RadioButton>
<RadioButton GroupName="Group1" x:Uid="button2" x:Name="button2">button2</RadioButton>
<RadioButton GroupName="Group1" x:Uid="button3" x:Name="button3">button3</RadioButton>
</StackPanel>
</GroupBox>
</DockPanel>
</Grid>
However, the IsChecked and IsPressed triggers do not get triggered. how to I declare them properly?
If you give your ToggleButton a name and then reference that in the trigger setters then it should work. So, your ControlTemplate would look something like...
<ControlTemplate TargetType="RadioButton">
<ToggleButton Name="toggleButton" IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
BorderThickness="2" BorderBrush="Yellow" Background="White"/>
<ControlTemplate.Triggers>
<Trigger Property="ToggleButton.IsChecked" Value="True">
<Setter TargetName="toggleButton" Property="Content" Value="different txt" />
</Trigger>
<Trigger Property="ToggleButton.IsPressed" Value="True">
<Setter TargetName="toggleButton" Property="Content" Value="different text" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
The prefixed types in the triggers are not needed, also change the bindings on the togglebutton to TemplateBindings.
There some other solutions available, but for this problem. Do the following:
1) Give Your Toggle Name
<ToggleButton Name="tglBtn" IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
Content="{Binding Content, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}"
BorderThickness="2" BorderBrush="Yellow" Background="White"/>
2) In trigger reference by the name given
<Trigger SourceName="tglBtn" Property="IsChecked" Value="True">
<Setter TargetName="tglBtn" Property="Content" Value="different txt" />
</Trigger>
Hope that helps