We Keep Coding

How should I set the properties of a Toggle Button in WPF?

This is the source code of Toggle Buttons.
<Window.Resources>
<Style TargetType="CheckBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="CheckBox">
<StackPanel Orientation="Horizontal">
<Grid >
<Border Width="45" Height="20" Background="LightGray" CornerRadius="10" Margin="5,0"></Border>
<Border x:Name="button" Height="25" Width="25" CornerRadius="12.5" HorizontalAlignment="Left" ></Border>
</Grid>
<ContentPresenter x:Name="content" Margin="10,0,0,0" Content="{TemplateBinding Content}" VerticalAlignment="Center"/>
</StackPanel>
<ControlTemplate.Resources>
<Storyboard x:Key="right">
<ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="button" Duration="0:0:0.4" From="0,0,0,0" To="28,0,0,0" >
<ThicknessAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
<Storyboard x:Key="left">
<ThicknessAnimation Storyboard.TargetProperty="Margin" Storyboard.TargetName="button" Duration="0:0:0.4" From="28,0,0,0" To="0,0,0,0" >
<ThicknessAnimation.EasingFunction>
<CircleEase EasingMode="EaseOut"/>
</ThicknessAnimation.EasingFunction>
</ThicknessAnimation>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="false">
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="leftt"></RemoveStoryboard>
<BeginStoryboard Storyboard="{StaticResource right}" x:Name="rightt" ></BeginStoryboard>
</Trigger.ExitActions>
<Setter TargetName="button" Property="Background" Value="#757575"></Setter>
</Trigger>
<Trigger Property="IsChecked" Value="true">
<Trigger.ExitActions>
<RemoveStoryboard BeginStoryboardName="rightt"></RemoveStoryboard>
<BeginStoryboard Storyboard="{StaticResource left}" x:Name="leftt" ></BeginStoryboard>
</Trigger.ExitActions>
<Setter TargetName="button" Property="Background" Value="#20BF55"></Setter>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<StackPanel VerticalAlignment="Center">
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 1</CheckBox>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 2</CheckBox>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 3</CheckBox>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 4</CheckBox>
<CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="26" Foreground="#0B4F6C" >Option 5</CheckBox>
</StackPanel>
So what I want to do here is run a command when the toggle button is enabled and run another command when the toggle button is disabled. I am new to WPF. So pls help me to do this and thanks in advance.

Using XAML Behaviors for WPF.
Checkbox example
<CheckBox
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
Content="Some Choice">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding UnCheckedCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding CheckedCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</CheckBox>
ToggleButton example
<ToggleButton
xmlns:i="http://schemas.microsoft.com/xaml/behaviors"
Content="Some Toggle">
<i:Interaction.Triggers>
<i:EventTrigger EventName="Unchecked">
<i:InvokeCommandAction Command="{Binding UnCheckedCommand}"/>
</i:EventTrigger>
<i:EventTrigger EventName="Checked">
<i:InvokeCommandAction Command="{Binding CheckedCommand}"/>
</i:EventTrigger>
</i:Interaction.Triggers>
</ToggleButton>
You are using CheckBoxes, not ToggleButtons.

"No target method found" error using cal:Message.Attach in WPF Context Menu

I am using Caliburn.Micro. I have tried the solutions I found for this problem but is no good. I have the following XAML code for my design:
<Grid x:Name="ActionGrid">
<MenuItem Header="Action" FontFamily="Open Sans" FontSize="14" HorizontalContentAlignment="Right" Foreground="White" x:Name="miAction" Margin="5" Background="#FF166FC4" Tag="{Binding DataContext}">
<MenuItem.Style>
<Style TargetType="{x:Type MenuItem}">
<Style.Triggers>
<EventTrigger RoutedEvent="Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
<Setter Property="Tag" Value="{Binding Path=DataContext, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=MenuItem}}"/>
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu cal:Action.TargetWithoutContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContextMenu}}">
<MenuItem Header="Remove Group" cal:Message.Attach="RemoveClicked()" />
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
</MenuItem.Style>
</MenuItem>
</Grid>
<UserControl.DataContext>
<vm:TransactionViewModel/>
</UserControl.DataContext>
Everytime I click on the Item, it returns No Method Found for RemoveClicked. I don't know what I did wrong. Please help me point it out.

Tag="{Binding DataContext}" should be Tag="{Binding}" and the cal:Action.TargetWithoutContext attached property should be set on the MenuItem. Then it works if you right click on the MenuItem to open the ContextMenu:
<MenuItem Header="Action" FontFamily="Open Sans" FontSize="14" HorizontalContentAlignment="Right" Foreground="White" x:Name="miAction"
Margin="5" Background="#FF166FC4" Tag="{Binding}">
<MenuItem.Style>
<Style TargetType="{x:Type MenuItem}">
<Style.Triggers>
<EventTrigger RoutedEvent="Click">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<BooleanAnimationUsingKeyFrames Storyboard.TargetProperty="ContextMenu.IsOpen">
<DiscreteBooleanKeyFrame KeyTime="0:0:0" Value="True"/>
</BooleanAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
<Setter Property="ContextMenu">
<Setter.Value>
<ContextMenu>
<MenuItem Header="Remove Group"
cal:Action.TargetWithoutContext="{Binding Path=PlacementTarget.Tag, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ContextMenu}}"
cal:Message.Attach="RemoveClicked()" />
</ContextMenu>
</Setter.Value>
</Setter>
</Style>
</MenuItem.Style>
</MenuItem>
Use an EventTrigger to open the ContextMenu on left click doesn't work with bindings and this has nothing to do with Caliburn.Micro:
WPF Context menu on left click
You may replace the EventTrigger with an attached behaviour.

I'm not sure, but you can test this:
<MenuItem Header="Remove Group" cal:Message.Attach="RemoveClicked" />

Bind animations to ViewModel property

I've got a "flip card"-style animation that works just fine. On one side, it has a button that, when clicked, triggers the animation "FlipOpen":
<Button Content="click me" Height="130">
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click" >
<BeginStoryboard Storyboard="{StaticResource FlipOpen}">
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
<Storyboard x:Key="FlipOpen">
<DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="-1" To="1" Storyboard.TargetName="Back"/>
<DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="-1" Storyboard.TargetName="Front"/>
</Storyboard>
<Storyboard x:Key="FlipClose">
<DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="1" To="-1" Storyboard.TargetName="Back"/>
<DoubleAnimation Duration="00:00:0.5" Storyboard.TargetProperty="RenderTransform.ScaleX" From="-1" To="1" Storyboard.TargetName="Front"/>
</Storyboard>
I would like to bind the animation to a boolean property on my ViewModel and I have tried to use DataTriggers:
a) define a style:
<Style x:Key="myStyle">
<Style.Triggers>
<DataTrigger Binding="{Binding FlipTheCard}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FlipOpen}"/>
</DataTrigger.EnterActions>
</DataTrigger>
<DataTrigger Binding="{Binding FlipTheCard}" Value="false">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FlipClose}"/>
</DataTrigger.EnterActions>
</DataTrigger>
</Style.Triggers>
b) apply it to both Grid-Containers that contain the front and back:
<Grid RenderTransformOrigin="0.5,0.5" x:Name="Back" Opacity="0" Style="{StaticResource myStyle}">
...
</Grid>
c) don't start the animation on button click, but bind a command that toggles the boolean to the button:
<Button Content="click me!" Command="{Binding ToggleFlipCard}" Height="130">
However, this results in an exception ("A storyboard-structure within a Style can not have a TargetName. Remove the TargetName").
What am I doing wrong here? How can I bind these animations to a boolean property on my ViewModel?
Thank you for any help!

I've also found a solution...it's far from perfect on the animation side (as I don't use keyframes and just scale the x property of both at the same time) but it should give you the idea:
Style:
<Storyboard x:Key="FlipOpen">
<DoubleAnimation Duration="0:0:0.3"
Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
To="0" />
</Storyboard>
<Storyboard x:Key="FlipClose">
<DoubleAnimation Duration="0:0:0.3"
Storyboard.TargetProperty="RenderTransform.(ScaleTransform.ScaleX)"
From="0"
To="1" />
</Storyboard>
<Style x:Key="GridStyle" TargetType="Grid">
<Setter Property="RenderTransformOrigin" Value="0.5,0.5" />
<Setter Property="RenderTransform">
<Setter.Value>
<ScaleTransform ScaleX="1" ScaleY="1" />
</Setter.Value>
</Setter>
</Style>
<Style x:Key="FrontGridStyle" TargetType="Grid"
BasedOn="{StaticResource GridStyle}">
<Style.Triggers>
<DataTrigger Binding="{Binding FlipTheCard}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FlipOpen}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FlipClose}" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
<Style x:Key="BackGridStyle" TargetType="Grid"
BasedOn="{StaticResource GridStyle}">
<Style.Triggers>
<DataTrigger Binding="{Binding FlipTheCard}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource FlipClose}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource FlipOpen}" />
</DataTrigger.ExitActions>
</DataTrigger>
</Style.Triggers>
</Style>
Grid:
<Grid>
<Grid Style="{StaticResource FrontGridStyle}">
<Border Width="100"
Height="100"
Background="Red" />
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding ToggleFlipCard}"
Content="click me!" />
</Grid>
<Grid Style="{StaticResource BackGridStyle}">
<Border Width="100"
Height="100"
Background="Green" />
<Button HorizontalAlignment="Center"
VerticalAlignment="Center"
Command="{Binding ToggleFlipCard}"
Content="click me!" />
</Grid>
</Grid>

I found a solution.. yikes
reference Microsoft.Expression.Interactions.dll
define Interaction-Triggers:
<i:Interaction.Triggers>
<ei:DataTrigger Binding="{Binding FlipToFront}" Value="true">
<ei:ControlStoryboardAction Storyboard="{StaticResource FlipOpen}"/>
</ei:DataTrigger>
<ei:DataTrigger Binding="{Binding FlipToFront}" Value="false">
<ei:ControlStoryboardAction Storyboard="{StaticResource FlipClose}"/>
</ei:DataTrigger>
</i:Interaction.Triggers>
credits

How to write a custom textbox in WPF with other components "glued" on it?

I have been for 2 days now trying to develop my own WPF textbox for no avail.
My initial try was inheriting from a control and then adding a template with all the stuff I wanted (a border and an asterisk in the outside).
Generic.xaml file:
<Style TargetType="{x:Type local:BdlTextBox}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:BdlTextBox">
<Grid x:Name="ContentGrid">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="8"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" x:Name="Tbl" Text="*" Foreground="Red" FontSize="15" Margin="0,-4,0,0"
Visibility="{Binding RelativeSource={RelativeSource AncestorType={x:Type local:BdlTextBox}},
Path=IsRequired, Converter={StaticResource myBoolToVisibilityConverter}}"/>
<Rectangle Grid.Column="1" x:Name="Bg" Fill="Red" Opacity="0"/>
<TextBox Grid.Column="1" x:Name="Tb" Margin="1,1,1,1"/>
</Grid>
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="flashAnimation">
<DoubleAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" From="0" To="1" AutoReverse="True" Duration="0:0:0.5" RepeatBehavior="2x" />
<DoubleAnimation Storyboard.TargetName="Bg" Storyboard.TargetProperty="Opacity" From="0" To="1" Duration="0:0:0.5" BeginTime="0:0:2"/>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=HasValidationError}" Value="True" >
<DataTrigger.EnterActions>
<BeginStoryboard Name="flash" Storyboard="{StaticResource flashAnimation}" />
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="flash"/>
</DataTrigger.ExitActions>
</DataTrigger>
<DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=HasValidationError}" Value="False" >
<Setter TargetName="Bg" Property="Opacity" Value="0"/>
</DataTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The problem is: I cannot use the control as a Textbox (the reason is obvious). I can't even properly use the Text property. So I was wondering what could be done to solve this problem.
Dependency Properties are also a problem. I have tried to "clone" the Text property from the Textbox "Tb", but failed too.

ContextMenu for ListViewItem only

I have a context menu - problem is I need it to only open when a listviewitem is clicked. Right now it will open if I click anywhere in the listview or in the header.
<ListView>
<ListView.ContextMenu>
<ContextMenu>
<MenuItem Header="More Info" Command="{Binding MoreInfo}" />
</ContextMenu>
</ListView.ContextMenu>
<ListView.View>
<GridView>
<!-- columns and stuff here -->
</GridView>
</ListView.View>
</ListView>
I have tried adding the ContextMenu as a resource and applying it as a style, but this breaks the command (clicking on More Info should open a dialog window, doesnt work this way)
<ListView.Resources>
<ContextMenu x:Key="ItemContextMenu">
<MenuItem Header="More Info" Command="{Binding MoreInfo}" Background="WhiteSmoke" />
</ContextMenu>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}" >
<Setter Property="ContextMenu" Value="{StaticResource ItemContextMenu}" />
</Style>
</ListView.ItemContainerStyle>
So not sure how to restrict the context menu to only the listviewitem and have the command work.

Use the RelativeSource in the command binding in the template, and it will work:
<ListView.Resources>
<ContextMenu x:Key="ItemContextMenu">
<MenuItem Header="More Info" Command="{Binding Path=DataContext.MoreInfo, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" Background="WhiteSmoke" />
</ContextMenu>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}" >
<Setter Property="ContextMenu" Value="{StaticResource ItemContextMenu}" />
</Style>
</ListView.ItemContainerStyle>

Expanding on this very helpful post...If your ContextMenu has custom buttons or other objects within a ControlTemplate, I have combined the answer above with the answer from Closing ContextMenu with Templated MenuItems so that when a user clicks on the Button, the ContextMenu closes normally only using XAML. This took about 10 hours to put together. Hope it saves you time. Supports MVVM ICommand usage. I also used the Style for the ContextMenu from [this post][2] to elminate the 90's look.
<ListView.Resources>
<ContextMenu x:Key="ItemContextMenu" Style="{StaticResource HorizontalContextMenu}">
<MenuItem>
<MenuItem.Template>
<ControlTemplate>
<Grid MinHeight="50" MinWidth="50">
<Button Style="{StaticResource CloseAppButton}" Command="{Binding Path=DataContext.DeleteCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" >
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContextMenu.IsOpen)" Storyboard.Target="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ContextMenu}}">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>False</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
<MenuItem>
<MenuItem.Template>
<ControlTemplate>
<Grid MinHeight="50" MinWidth="50">
<Button Style="{StaticResource AddButton}" Command="{Binding Path=DataContext.TestCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" >
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContextMenu.IsOpen)" Storyboard.Target="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ContextMenu}}">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>False</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
<MenuItem>
<MenuItem.Template>
<ControlTemplate>
<Grid MinHeight="50" MinWidth="50">
<Button Style="{StaticResource PluginInfoButton}" Command="{Binding Path=DataContext.TestCommand, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=ListView}}" >
<Button.Triggers>
<EventTrigger RoutedEvent="Button.Click">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContextMenu.IsOpen)" Storyboard.Target="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=ContextMenu}}">
<DiscreteObjectKeyFrame KeyTime="0:0:0">
<DiscreteObjectKeyFrame.Value>
<sys:Boolean>False</sys:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Button.Triggers>
</Button>
</Grid>
</ControlTemplate>
</MenuItem.Template>
</MenuItem>
</ContextMenu>
</ListView.Resources>
<ListView.ItemContainerStyle>
<Style TargetType="{x:Type ListViewItem}" >
<Setter Property="ContextMenu" Value="{StaticResource ItemContextMenu}" />
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
</Style>
</ListView.ItemContainerStyle>