InvalidOperationException Ellipse not Found after Binding "IsChecked" - wpf

I am using a Togglebutton Style from here after Binding the IsChecked Property to my ViewModel the Program crashes with a System.InvalidOperationException Ellipse not found in "System.Windows.Controls.ControlTemplate".
The Style looks like this:
<Style TargetType="{x:Type ToggleButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Viewbox>
<Border x:Name="Border"
CornerRadius="10"
Background="#FFE2E2E2"
Width="40"
Height="20">
<Border.Effect>
<DropShadowEffect ShadowDepth="0.5"
Direction="0"
Opacity="0.3" />
</Border.Effect>
<Ellipse x:Name="Ellipse"
Fill="#FF909090"
Stretch="Uniform"
Margin="-8 -4"
Stroke="Gray"
StrokeThickness="0.2"
HorizontalAlignment="Stretch">
<Ellipse.Effect>
<DropShadowEffect BlurRadius="10"
ShadowDepth="1"
Opacity="0.3"
Direction="260" />
</Ellipse.Effect>
</Ellipse>
</Border>
</Viewbox>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Checked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
To="#00facc"
Duration="0:0:0.05"
AccelerationRatio="0.7"
DecelerationRatio="0.3" />
<ThicknessAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="20 -4 -8 -4"
Duration="0:0:0.15"
AccelerationRatio="0.7"
DecelerationRatio="0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Unchecked">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
To="#00facc"
Duration="0:0:0.05"
AccelerationRatio="0.7"
DecelerationRatio="0.3" />
<ThicknessAnimation
Storyboard.TargetName="Ellipse"
Storyboard.TargetProperty="Margin"
To="-8 -4"
Duration="0:0:0.15"
AccelerationRatio="0.7"
DecelerationRatio="0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And my usage like this:
<ToggleButton Grid.Column="0"
Grid.Row="2"
IsChecked="{Binding IsAutostop}"/>
I'd like to use the style AND be able to use the "IsChecked" Property.
EDIT
Thanks for the comments.
I open the window with a Service bound to a command in a taskbaricon.
The Service:
class WindowService
{
public void OpenOptionsView(MainViewModel mvm)
{
OptionsView optionsView = new OptionsView { DataContext = mvm };
optionsView.Show();
}
}
The important parts of the MainviewModel:
public ICommand OpenOptionsViewCommand { get; private set; }
public bool IsAutostop { get { return Settings.Default.Autostop; } set { Settings.Default.Autostop = value; Settings.Default.Save(); OnPropertyChanged(); } }
public MainViewModel()
{
OpenOptionsViewCommand = new RelayCommand(OpenOptionsView, param => true);
}
private void OpenOptionsView(object o)
{
WindowService ws = new WindowService();
ws.OpenOptionsView(this);
}
I stored my TaskbarIcon in a seperated View:
<tb:TaskbarIcon>
<tb:TaskbarIcon.ContextMenu>
<ContextMenu Background="#1e1e1e">
<MenuItem Header="Programm öffnen"
Foreground="White"
Command="{Binding OpenOptionsViewCommand}"/>
</ContextMenu>
</tb:TaskbarIcon.ContextMenu>
</tb:TaskbarIcon>
EDIT II:
I just found out, that the problem occurs when the bound value is True and the window should be opened with a checked Togglebutton.

Related

Handle an event in code behind as well as Invoke a view model's command on some event

Here's the overview :
I am using a Custom control (CusCtrl) to show taskbar icon , it also has a Popup property. so when you click on the icon the CusCtrl shows the Popup.
I am setting the child of the pop up with a UserControl (lets say UC1).
I am setting the DataContext of CusCtrl with a ViewModel thus even the UC1 get binded with a respective ViewModel (lets say VM1)
Now the UC1 has some element - a Label, on clicking the label I need 2 things to happen:
Invoke a command on the view model VM1 -
From the command I need to pass some of the view model's properties as parameters and open some window UI.
Close the PopUp -
For this I have thought of listening the MouseUp Event in code behind of UserControl & then fire a routed event (FirePopUpClose - this event is defined in the UserControl UC1) which will be handled by the app & then from within the
handler, Custom Conntrol's ClosePopUp method will be called.
I do know how to invoke command on the MouseUp event on label using the Interactivity dll, but then how can I raise the FirePopUpClose routed Event?
Or how do apply a MouseUp event handler on label as well as bind a command to that label ?
Am I even thinking this the right way or there's some better cleaner way to do some UI action as well as close the PopUp by sticking to MVVM?
what about the next solution; try to use Popup.IsOpen property (here is the information about, and here is the example of usage #867 – Controlling Whether a Popup Is Open Using Data Binding ). Bind it to UC1 DataContext directly or via DependencyProperty of CusCtrl user control (you have to create that property in your control that encapsulate the Popup). That's all, this way you will be able to manage popup to be opened or closed without the event.
Update
Try the next:
1. Main Xaml:
<Window x:Class="PopupIsOpenDataBindingHelpAttempt.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:popupIsOpenDataBindingHelpAttempt="clr-namespace:PopupIsOpenDataBindingHelpAttempt"
xmlns:system="clr-namespace:System;assembly=mscorlib"
Title="MainWindow" Height="350" Width="525">
<Window.DataContext>
<popupIsOpenDataBindingHelpAttempt:DemoMainViewModel/>
</Window.DataContext>
<Window.Resources>
<DataTemplate x:Key="PopupInnerControlDataTemplateKey" DataType="{x:Type popupIsOpenDataBindingHelpAttempt:TaskBarDemoViewModel}">
<Grid Width="150" Height="85">
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding TextString}"
Margin="5" Foreground="Red"
Width="150" TextWrapping="WrapWithOverflow"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
<Button Grid.Row="1" Content="Press to close" Command="{Binding PopupInnerButtonCommand}"
VerticalAlignment="Stretch" HorizontalAlignment="Stretch"/>
</Grid>
</DataTemplate>
<Image x:Key="ImageControl" Source="Pic/2015_10_16_Bing_en-US.jpg" IsHitTestVisible="False"/>
</Window.Resources>
<Grid Width="75" Height="75" HorizontalAlignment="Center" VerticalAlignment="Center">
<popupIsOpenDataBindingHelpAttempt:TaskBarIconProjectDemo
ButtonContentProperty="{StaticResource ImageControl}"
ButtonCommandProperty="{Binding ShowPopupCommand}"
PopupIsOpenProperty="{Binding IsPopupOpen, UpdateSourceTrigger=PropertyChanged}"
PopupInnerContentControlDataContext="{Binding TaskBarDemoViewModel, UpdateSourceTrigger=PropertyChanged}"
PopupInnerContentControlContentTemplate="{StaticResource PopupInnerControlDataTemplateKey}"/>
</Grid>
2. Popup encapsulating XAMl:
<UserControl x:Class="PopupIsOpenDataBindingHelpAttempt.TaskBarIconProjectDemo"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300" x:Name="This">
<Grid>
<Button Style="{StaticResource SpecialButtonStyle}" Command="{Binding ElementName=This, Path=ButtonCommandProperty}"
Content="{Binding ElementName=This, Path=ButtonContentProperty}"></Button>
<Popup IsOpen="{Binding ElementName=This, Path=PopupIsOpenProperty}">
<ContentControl Content="{Binding ElementName=This, Path=PopupInnerContentControlDataContext}"
ContentTemplate="{Binding ElementName=This, Path=PopupInnerContentControlContentTemplate}"/>
</Popup>
</Grid>
3. Popup encapsulating control code behind (dependency properties):
public partial class TaskBarIconProjectDemo : UserControl
{
public static readonly DependencyProperty ButtonCommandPropertyProperty = DependencyProperty.Register("ButtonCommandProperty", typeof (ICommand), typeof (TaskBarIconProjectDemo), new PropertyMetadata(default(ICommand)));
public static readonly DependencyProperty PopupIsOpenPropertyProperty = DependencyProperty.Register("PopupIsOpenProperty", typeof (bool), typeof (TaskBarIconProjectDemo), new PropertyMetadata(default(bool)));
public static readonly DependencyProperty PopupInnerContentControlDataContextProperty = DependencyProperty.Register("PopupInnerContentControlDataContext", typeof (object), typeof (TaskBarIconProjectDemo), new PropertyMetadata(default(object)));
public static readonly DependencyProperty PopupInnerContentControlContentTemplateProperty = DependencyProperty.Register("PopupInnerContentControlContentTemplate", typeof (DataTemplate), typeof (TaskBarIconProjectDemo), new PropertyMetadata(default(DataTemplate)));
public static readonly DependencyProperty ButtonContentPropertyProperty = DependencyProperty.Register("ButtonContentProperty", typeof (object), typeof (TaskBarIconProjectDemo), new PropertyMetadata(default(object)));
public TaskBarIconProjectDemo()
{
InitializeComponent();
}
public ICommand ButtonCommandProperty
{
get { return (ICommand) GetValue(ButtonCommandPropertyProperty); }
set { SetValue(ButtonCommandPropertyProperty, value); }
}
public bool PopupIsOpenProperty
{
get { return (bool) GetValue(PopupIsOpenPropertyProperty); }
set { SetValue(PopupIsOpenPropertyProperty, value); }
}
public object PopupInnerContentControlDataContext
{
get { return (object) GetValue(PopupInnerContentControlDataContextProperty); }
set { SetValue(PopupInnerContentControlDataContextProperty, value); }
}
public DataTemplate PopupInnerContentControlContentTemplate
{
get { return (DataTemplate) GetValue(PopupInnerContentControlContentTemplateProperty); }
set { SetValue(PopupInnerContentControlContentTemplateProperty, value); }
}
public object ButtonContentProperty
{
get { return (object) GetValue(ButtonContentPropertyProperty); }
set { SetValue(ButtonContentPropertyProperty, value); }
}
}
4. View Models:
public class DemoMainViewModel:BaseObservableObject
{
private bool _isOpen;
private TaskBarDemoViewModel _taskBarDemoViewModel;
private ICommand _showPopupCommnad;
public DemoMainViewModel()
{
TaskBarDemoViewModel = new TaskBarDemoViewModel(ClosePopup, "Here you can put your content. Go for it...");
}
private void ClosePopup()
{
IsPopupOpen = false;
}
public bool IsPopupOpen
{
get { return _isOpen; }
set
{
_isOpen = value;
OnPropertyChanged();
}
}
public TaskBarDemoViewModel TaskBarDemoViewModel
{
get { return _taskBarDemoViewModel; }
set
{
_taskBarDemoViewModel = value;
OnPropertyChanged();
}
}
public ICommand ShowPopupCommand
{
get { return _showPopupCommnad ?? (_showPopupCommnad = new RelayCommand(ShowPopup)); }
}
private void ShowPopup()
{
IsPopupOpen = true;
}
}
public class TaskBarDemoViewModel:BaseObservableObject
{
private readonly Action _closePopupCommand;
private ICommand _command;
private string _textString;
public TaskBarDemoViewModel(Action closePopupCommand, string content)
{
_closePopupCommand = closePopupCommand;
TextString = content;
}
public ICommand PopupInnerButtonCommand
{
get { return _command ?? (_command = new RelayCommand(TargetMethod)); }
}
private void TargetMethod()
{
//add your logic here
if(_closePopupCommand == null) return;
_closePopupCommand();
}
public string TextString
{
get { return _textString; }
set
{
_textString = value;
OnPropertyChanged();
}
}
}
5. Button style (change this as your need):
<Color x:Key="ButtonLowerPartKey">#FFD5E0EE</Color>
<Color x:Key="ButtonUpperPartKey">#FFEAF1F8</Color>
<Color x:Key="PressedColorButtonLowerPartKey">#FFF4C661</Color>
<Color x:Key="PressedButtonUpperPartKey">#FFF4CC87</Color>
<Color x:Key="HooveredButtonLowerPartKey">#FFFFD06D</Color>
<Color x:Key="HooveredButtonUpperPartKey">#FFFFF0DF</Color>
<Style x:Key="SpecialButtonStyle" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Padding" Value="5">
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid x:Name="Grid">
<Ellipse x:Name="ButtonControlBorder" Stroke="{TemplateBinding BorderBrush}"
StrokeThickness="{TemplateBinding BorderThickness}"
Width="{TemplateBinding Width}" Height="{TemplateBinding Height}">
<Ellipse.Fill>
<LinearGradientBrush x:Name="BrushKey" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat" StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.5" Color="{StaticResource ButtonUpperPartKey}" />
<GradientStop Offset="0.5" Color="{StaticResource ButtonUpperPartKey}" />
<GradientStop Offset="0.5" Color="{StaticResource ButtonLowerPartKey}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="Pressed" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}" Opacity="0">
<Ellipse.Fill>
<LinearGradientBrush x:Name="PressedBrushKey" MappingMode="RelativeToBoundingBox" SpreadMethod="Repeat" StartPoint="0.5,0" EndPoint="0.5,1">
<LinearGradientBrush.GradientStops>
<GradientStop Offset="0.5" Color="{StaticResource PressedButtonUpperPartKey}" />
<GradientStop Offset="0.5" Color="{StaticResource PressedButtonUpperPartKey}" />
<GradientStop Offset="0.5" Color="{StaticResource PressedColorButtonLowerPartKey}" />
</LinearGradientBrush.GradientStops>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="InnerPressed"
Width="{Binding ElementName=Pressed, Path=Width}" Height="{Binding ElementName=Pressed, Path=Height}"
Stroke="DarkOrange" Opacity="0" StrokeThickness="1" SnapsToDevicePixels="True" Fill="Transparent"/>
<ContentPresenter Content="{TemplateBinding Button.Content}" HorizontalAlignment="Center" VerticalAlignment="Center">
<ContentPresenter.OpacityMask>
<VisualBrush Visual="{Binding ElementName=ButtonControlBorder}" />
</ContentPresenter.OpacityMask>
</ContentPresenter>
<Grid.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard x:Name="MouseEnterStoryboard">
<Storyboard>
<ColorAnimation Storyboard.TargetName="BrushKey" Storyboard.TargetProperty="GradientStops[0].Color" From="{StaticResource ButtonUpperPartKey}" To="{StaticResource HooveredButtonUpperPartKey}" Duration="0:0:0.3" AutoReverse="False" />
<ColorAnimation Storyboard.TargetName="BrushKey" Storyboard.TargetProperty="GradientStops[2].Color" From="{StaticResource ButtonLowerPartKey}" To="{StaticResource HooveredButtonLowerPartKey}" Duration="0:0:0.3" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="BrushKey" Storyboard.TargetProperty="GradientStops[0].Color" From="{StaticResource HooveredButtonUpperPartKey}" To="{StaticResource ButtonUpperPartKey}" Duration="0:0:1" AutoReverse="False" />
<ColorAnimation Storyboard.TargetName="BrushKey" Storyboard.TargetProperty="GradientStops[2].Color" From="{StaticResource HooveredButtonLowerPartKey}" To="{StaticResource ButtonLowerPartKey}" Duration="0:0:1" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Grid.Triggers>
</Grid>
<ControlTemplate.Resources>
<Storyboard x:Key="MouseUpTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="MouseDownTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Pressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="0.8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="InnerPressedMouseUpTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InnerPressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.25" Value="0" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="InnerPressedMouseDownTimeLine">
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="InnerPressed" Storyboard.TargetProperty="Opacity">
<SplineDoubleKeyFrame KeyTime="00:00:00.05" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</ControlTemplate.Resources>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" SourceName="Grid" Value="True">
<Setter Property="Stroke" TargetName="ButtonControlBorder">
<Setter.Value>
<SolidColorBrush Color="{StaticResource HooveredButtonLowerPartKey}">
</SolidColorBrush>
</Setter.Value>
</Setter>
</Trigger>
<Trigger Property="ButtonBase.IsPressed" Value="True">
<Trigger.EnterActions>
<BeginStoryboard Storyboard="{StaticResource MouseDownTimeLine}" />
<BeginStoryboard Storyboard="{StaticResource InnerPressedMouseDownTimeLine}">
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard Storyboard="{StaticResource MouseUpTimeLine}" />
<BeginStoryboard Storyboard="{StaticResource InnerPressedMouseUpTimeLine}">
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
BaseObservableObject is the simple implementation of INCP.
RelayCommand is the simple implementation of ICommand interface.
I'll glad to help if you will have the problem with the code.
Regards,

Drag over effect using XAML

I am trying to change Background of a Border when user is dragging a file on it.
I want to define the effect using XAML only.
I tried the below but the Background is not changed when dragging a file on the Border.
<Border Name="dropBorder" BorderThickness="1" AllowDrop="True">
<Border.Triggers>
<EventTrigger RoutedEvent="DragOver">
<BeginStoryboard>
<Storyboard Storyboard.TargetProperty="Background">
<ColorAnimation From="Transparent" To="#FF444444" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock Text="Drag and drop file(s) here" Foreground="Gray" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10"/>
</Border>
I also tried to use DragEnter as below with no results
<EventTrigger RoutedEvent="Border.DragEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Storyboard.TargetName="dropBorder"
Storyboard.TargetProperty="Background"
Duration="0:0:0.5"
From="Transparent" To="#FF444444"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
I didnt quite meet your 100% requirement. I created an attached property, which I set via code-behind, so you will want to assess this. Also, moved the color animation around as you were trying to animate a brush, not a color.
XAML:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:wpfApplication1="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<SolidColorBrush x:Key="SharedBackgroundBrush" Color="Transparent" />
</Window.Resources>
<Border Name="dropBorder" BorderThickness="1" AllowDrop="True" DragEnter="DropBorder_OnDragEnter" DragLeave="DropBorder_OnPreviewDragLeave" Background="{StaticResource SharedBackgroundBrush}">
<Border.Style>
<Style>
<Style.Triggers>
<Trigger Property="wpfApplication1:DragDropHelper.IsDragOver" Value="True">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard Storyboard.Target="{StaticResource SharedBackgroundBrush}" Storyboard.TargetProperty="Color">
<ColorAnimation From="Transparent" To="Yellow" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
<Trigger.ExitActions>
<BeginStoryboard>
<Storyboard Storyboard.Target="{StaticResource SharedBackgroundBrush}" Storyboard.TargetProperty="Color">
<ColorAnimation From="Yellow" To="Transparent" Duration="0:0:0.5" />
</Storyboard>
</BeginStoryboard>
</Trigger.ExitActions>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Text="Drag and drop file(s) here" Foreground="Gray" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10"/>
</Border>
</Window>
Code:
using System.Windows;
namespace WpfApplication1
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void DropBorder_OnDragEnter(object sender, DragEventArgs e)
{
DragDropHelper.SetIsDragOver((DependencyObject)sender, true);
}
private void DropBorder_OnPreviewDragLeave(object sender, DragEventArgs e)
{
DragDropHelper.SetIsDragOver((DependencyObject)sender, false);
}
}
public class DragDropHelper
{
public static readonly DependencyProperty IsDragOverProperty = DependencyProperty.RegisterAttached(
"IsDragOver", typeof (bool), typeof (DragDropHelper), new PropertyMetadata(default(bool)));
public static void SetIsDragOver(DependencyObject element, bool value)
{
element.SetValue(IsDragOverProperty, value);
}
public static bool GetIsDragOver(DependencyObject element)
{
return (bool) element.GetValue(IsDragOverProperty);
}
}
}

Setting Border background with a template binding

Value="{TemplateBinding HeaderColor}"I've created my own control, and I'm wondering if I can bind a Border.Background to a template property. Currently i'm setting it with a StaticResource like the following:
<Color x:Key="ControlMouseOverColor">green</Color>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout">
<EasingColorKeyFrame KeyTime="0:0:6" Value="{StaticResource ControlMouseOverColor}" />
</ColorAnimationUsingKeyFrames>
I'd like it be a property on my control, and be able to set it as a template binding
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout">
<EasingColorKeyFrame KeyTime="0:0:6" Value="{TemplateBinding HeaderColor}" />
</ColorAnimationUsingKeyFrames>
MainPage.xaml
<ctrl:Selection Grid.Column="0" HeaderColor="Red" HeaderText="Header Text" />
my class:
public static readonly DependencyProperty HeaderColorProperty =
DependencyProperty.Register("HeaderColor", typeof(System.Windows.Media.Color), typeof(Selection), new PropertyMetadata(System.Windows.Media.Colors.Red));
public System.Windows.Media.Color HeaderColor {
get { return (System.Windows.Media.Color)GetValue(HeaderColorProperty); }
set { SetValue(HeaderColorProperty, value); }
}
This 2nd option does not work, should I be able to do this? I don't get an error, it just does not change to the color I set.
Comment left by AngelWPF asked for more code, pasting below, I'm in the beginning stages of learning to create a control, wanted to note that, because there is a lot I have not got to yet, one piece at a time :)
generic.xaml
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:controls="clr-namespace:SelectionControl.Library"
xmlns:ctrl="clr-namespace:SelectionControl.Library;assembly=SelectionControl">
<LinearGradientBrush x:Key="HeaderBackground" EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0" />
<GradientStop Color="Gray" Offset="1" />
</LinearGradientBrush>
<Color x:Key="ControlMouseEnterColor">aliceblue</Color>
<Color x:Key="ControlMouseLeaveColor">Gray</Color>
<Color x:Key="ControlLeftMouseUpColor">Red</Color>
<Style TargetType="ctrl:Selection">
<Setter Property="Width" Value="Auto" />
<Setter Property="Height" Value="Auto" />
<Setter Property="FontSize" Value="12" />
<Setter Property="FontWeight" Value="Bold" />
<Setter Property="Foreground" Value="AliceBlue" />
<Setter Property="Margin" Value="2,2,2,2" />
<Setter Property="Background" Value="{StaticResource ResourceKey=HeaderBackground}" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ctrl:Selection">
<Grid x:Name="RootElement" Margin="{TemplateBinding Margin}">
<!-- Visual States -->
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="MouseEnter">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout">
<EasingColorKeyFrame KeyTime="0:0:.5" Value="{TemplateBinding HeaderColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseLeave">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout">
<EasingColorKeyFrame KeyTime="0:0:1" Value="{StaticResource ControlMouseLeaveColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseLeftUp">
<Storyboard>
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.Background).(GradientBrush.GradientStops)[1].(GradientStop.Color)" Storyboard.TargetName="headerLayout">
<EasingColorKeyFrame KeyTime="0:0:1" Value="{StaticResource ControlLeftMouseUpColor}" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<!-- End Visual States-->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Header -->
<Border x:Name="headerLayout" Background="{TemplateBinding Background}" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" CornerRadius="2,2,2,2" BorderBrush="Black" BorderThickness="1">
<StackPanel>
<ToggleButton ></ToggleButton>
<TextBlock Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding HeaderText}" FontWeight="{TemplateBinding FontWeight}" FontSize="{TemplateBinding FontSize}" HorizontalAlignment="Center" VerticalAlignment="Center" />
</StackPanel>
</Border>
<!-- Body Content -->
<ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Selection.cs
using System.Windows;
using System.Windows.Controls;
using System.Windows.Input;
namespace SelectionControl.Library {
[TemplateVisualState(Name = Selection.MouseEnterStateName, GroupName = Selection.CommonStatesGroupName)]
[TemplateVisualState(Name = Selection.MouseLeaveStateName, GroupName = Selection.CommonStatesGroupName)]
[TemplateVisualState(Name = Selection.MouseLeftUpStateName, GroupName = Selection.CommonStatesGroupName)]
public class Selection : ContentControl {
public const string CommonStatesGroupName = "CommonStates";
public const string MouseEnterStateName = "MouseEnter";
public const string MouseLeaveStateName = "MouseLeave";
public const string MouseLeftUpStateName = "MouseLeftUp";
public Selection() {
this.DefaultStyleKey = typeof(Selection);
this.MouseEnter += new MouseEventHandler(OnMouseEnter);
this.MouseLeave += new MouseEventHandler(OnMouseLeave);
this.MouseLeftButtonUp += new MouseButtonEventHandler(OnMouseLeftButtonUp);
}
void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e) {
this.GoToState(Selection.MouseLeftUpStateName, true);
}
void OnMouseLeave(object sender, MouseEventArgs e) {
this.GoToState(Selection.MouseLeaveStateName, true);
}
void OnMouseEnter(object sender, MouseEventArgs e) {
this.GoToState(Selection.MouseEnterStateName, true);
}
private void GoToState(string stateName, bool useTransitions) {
VisualStateManager.GoToState(this, stateName, useTransitions);
}
public static readonly DependencyProperty HeaderTextProperty =
DependencyProperty.Register("HeaderText", typeof(string), typeof(Selection), new PropertyMetadata(""));
public string HeaderText {
get { return (string)GetValue(HeaderTextProperty); }
set { SetValue(HeaderTextProperty, value); }
}
public static readonly DependencyProperty HeaderColorProperty =
DependencyProperty.Register("HeaderColor", typeof(System.Windows.Media.Color), typeof(Selection), new PropertyMetadata(System.Windows.Media.Colors.Red));
public System.Windows.Media.Color HeaderColor {
get { return (System.Windows.Media.Color)GetValue(HeaderColorProperty); }
set { SetValue(HeaderColorProperty, value); }
}
}}
I have had mixed results using TemplateBinding on custom dependency properties. Because of this, I have used RelativeSource TemplatedParent which seems to work in every situation.
<EasingColorKeyFrame KeyTime="0:0:.5" Value="{Binding HeaderColor, RelativeSource={RelativeSource TemplatedParent}}" />

Silverlight: access control inside the default template of a child control (derived from a templated control)

I am trying to implement the following hierarchy of controls:
RoundedHandleBase:
- this will have a round border around a content presenter that will host a path defined in the template of the child controls.
- it will also provide 2 states: MouseOver and Normal (it displays a rectangle over the path when mouse is over)
public class RoundedHandleBase : ContentControl
{
public RoundedHandleBase()
: base()
{
base.DefaultStyleKey = typeof(RoundedHandleBase);
this.MouseEnter += new MouseEventHandler(RoundedHandleBase_MouseEnter);
this.MouseLeave += new MouseEventHandler(RoundedHandleBase_MouseLeave);
}
void RoundedHandleBase_MouseEnter(object sender, MouseEventArgs e)
{
bool bRet = VisualStateManager.GoToState((Control)sender, "MouseOver", true);
}
void RoundedHandleBase_MouseLeave(object sender, MouseEventArgs e)
{
bool bRet = VisualStateManager.GoToState((Control)sender, "Normal", true);
}
}
FlipHandle:
- this defines a Path as the template (that is the actual icon of the handle):
public class FlipHandle : RoundedHandleBase
{
private bool bFlipPath;
public bool FlipPath
{
get { return bFlipPath; }
set
{
bFlipPath = value;
}
}
public FlipHandle()
: base()
{
base.DefaultStyleKey = typeof(FlipHandle);
bFlipPath = false;
}
public override void OnApplyTemplate()
{
base.OnApplyTemplate();
if (bFlipPath)
{
ContentPresenter content = this.GetTemplateChild("content") as ContentPresenter;
Path arrowPath = this.GetTemplateChild("Path_FlipHandle") as Path;
}
}
}
generic.xaml
*generic.xaml*
<!--ROUNDED HANDLES -->
<ControlTemplate x:Key="RoundedHandleBaseTemplate" TargetType="local:RoundedHandleBase">
<Viewbox>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="rectangleOver" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.6"/>
<SplineDoubleKeyFrame KeyTime="00:00:00.2000000" Value="0.3"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="rectangleOver" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.15"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border CornerRadius="2,2,2,2">
<Grid Height="Auto" Width="Auto">
<Border Margin="0,0,0,0" BorderBrush="#FFFFFFFF" BorderThickness="2,2,2,2" CornerRadius="1,1,1,1" Width="20" Height="20">
<Grid>
<Viewbox Width="14" Height="14">
<ContentPresenter x:Name="content" Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Center" VerticalAlignment="Center"></ContentPresenter>
</Viewbox>
<Rectangle x:Name="rectangleOver" Fill="#FFFFFFFF" RadiusX="2" RadiusY="2" Margin="1,1,1,1" Opacity="0"/>
</Grid>
</Border>
</Grid>
</Border>
</Viewbox>
</ControlTemplate>
<Style TargetType="local:RoundedHandleBase" x:Key="RoundedHandleStyle">
<Setter Property="Template" Value="{StaticResource RoundedHandleBaseTemplate}">
</Setter>
</Style>
<Style TargetType="local:FlipHandle" BasedOn="{StaticResource RoundedHandleStyle}">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Path x:Name="Path_FlipHandle" Width="47.5646" Height="49.2324" Canvas.Left="472.184" Canvas.Top="584.534" Stretch="Fill" Fill="#FFFFFFFF" Data="M 494.718,633.76C 508.77,634.067 520.133,622.527 519.738,608.563C 519.534,601.327 516.378,595.502 512.286,591.527C 508.354,587.711 502.225,583.955 493.832,584.608C 482.414,585.496 475.704,591.912 472.184,601.111L 501.638,601.111C 501.668,599.118 501.62,595.698 501.638,593.124C 505.862,596.766 509.822,601.13 513.884,605.191C 514.376,605.684 517.992,608.638 517.965,609.272C 517.962,609.336 516.478,610.758 516.013,611.224C 513.753,613.483 511.846,615.214 509.802,617.258C 506.906,620.154 504.43,623.172 501.638,625.066C 501.618,622.551 501.669,619.192 501.638,617.258L 472.184,617.258C 475.668,626.822 483.53,633.515 494.718,633.76 Z ">
<Path.RenderTransform>
<ScaleTransform CenterX="23.7823" CenterY="24.6162" ScaleX="1" ScaleY="1"></ScaleTransform>
</Path.RenderTransform>
</Path>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<!--/ROUNDED HANDLES -->
My problem is:
- I cannot access the Path in the FlipHandle in order to modify its ScaleTransform in OnApplyTemplate.
Path arrowPath = this.GetTemplateChild("Path_FlipHandle") as Path;
-> arrowPath is allways null.
On the other hand, i can access the "content" content presenter:
ContentPresenter content = this.GetTemplateChild("content") as ContentPresenter;
-> the above works.
Please advice.
Thank you.
You can't access path with GetTemplateChild if it is not part of the template. You could make it part of your template or you could define some visual states on your flip handle and use GoToState method.

WPF - Making an animation's execution conditional on a property of the bound data item

I have a data object -- a custom class called Notification -- that exposes a IsCritical property. The idea being that if a notification will expire, it has a period of validity and the user's attention should be drawn towards it.
Imagine a scenario with this test data:
_source = new[] {
new Notification { Text = "Just thought you should know" },
new Notification { Text = "Quick, run!", IsCritical = true },
};
The second item should appear in the ItemsControl with a pulsing background. Here's a simple data template excerpt that shows the means by which I was thinking of animating the background between grey and yellow.
<DataTemplate DataType="Notification">
<Border CornerRadius="5" Background="#DDD">
<Border.Triggers>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
From="#DDD" To="#FF0" Duration="0:0:0.7"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<ContentPresenter Content="{TemplateBinding Content}" />
</Border>
</DataTemplate>
What I'm unsure about is how to make this animation conditional upon the value of IsCritical. If the bound value is false, then the default background colour of #DDD should be maintained.
The final part of this puzzle is... DataTriggers. All you have to do is add one DataTrigger to your DataTemplate, bind it to IsCritical property, and whenever it's true, in it's EnterAction/ExitAction you start and stop highlighting storyboard. Here is completely working solution with some hard-coded shortcuts (you can definitely do better):
Xaml:
<Window x:Class="WpfTest.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Notification Sample" Height="300" Width="300">
<Window.Resources>
<DataTemplate x:Key="NotificationTemplate">
<Border Name="brd" Background="Transparent">
<TextBlock Text="{Binding Text}"/>
</Border>
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding IsCritical}" Value="True">
<DataTrigger.EnterActions>
<BeginStoryboard Name="highlight">
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="(Panel.Background).(SolidColorBrush.Color)"
Storyboard.TargetName="brd"
From="#DDD" To="#FF0" Duration="0:0:0.5"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
<DataTrigger.ExitActions>
<StopStoryboard BeginStoryboardName="highlight"/>
</DataTrigger.ExitActions>
</DataTrigger>
</DataTemplate.Triggers>
</DataTemplate>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ItemsControl ItemsSource="{Binding Notifications}"
ItemTemplate="{StaticResource NotificationTemplate}"/>
<Button Grid.Row="1"
Click="ToggleImportance_Click"
Content="Toggle importance"/>
</Grid>
</Window>
Code behind:
using System.Collections.Generic;
using System.ComponentModel;
using System.Windows;
namespace WpfTest
{
public partial class Window1 : Window
{
public Window1()
{
InitializeComponent();
DataContext = new NotificationViewModel();
}
private void ToggleImportance_Click(object sender, RoutedEventArgs e)
{
((NotificationViewModel)DataContext).ToggleImportance();
}
}
public class NotificationViewModel
{
public IList<Notification> Notifications
{
get;
private set;
}
public NotificationViewModel()
{
Notifications = new List<Notification>
{
new Notification
{
Text = "Just thought you should know"
},
new Notification
{
Text = "Quick, run!",
IsCritical = true
},
};
}
public void ToggleImportance()
{
if (Notifications[0].IsCritical)
{
Notifications[0].IsCritical = false;
Notifications[1].IsCritical = true;
}
else
{
Notifications[0].IsCritical = true;
Notifications[1].IsCritical = false;
}
}
}
public class Notification : INotifyPropertyChanged
{
private bool _isCritical;
public string Text { get; set; }
public bool IsCritical
{
get { return _isCritical; }
set
{
_isCritical = value;
InvokePropertyChanged("IsCritical");
}
}
public event PropertyChangedEventHandler PropertyChanged;
private void InvokePropertyChanged(string name)
{
var handler = PropertyChanged;
if (handler != null)
{
handler(this, new PropertyChangedEventArgs(name));
}
}
}
}
Hope this helps :).
What I would do is create two DataTemplates and use a DataTemplateSelector. Your XAML would be something like:
<ItemsControl
ItemsSource="{Binding ElementName=Window, Path=Messages}">
<ItemsControl.Resources>
<DataTemplate
x:Key="CriticalTemplate">
<Border
CornerRadius="5"
Background="#DDD">
<Border.Triggers>
<EventTrigger
RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
From="#DDD"
To="#FF0"
Duration="0:0:0.7"
AutoReverse="True"
RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Border.Triggers>
<TextBlock
Text="{Binding Path=Text}" />
</Border>
</DataTemplate>
<DataTemplate
x:Key="NonCriticalTemplate">
<Border
CornerRadius="5"
Background="#DDD">
<TextBlock
Text="{Binding Path=Text}" />
</Border>
</DataTemplate>
</ItemsControl.Resources>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplateSelector>
<this:CriticalItemSelector
Critical="{StaticResource CriticalTemplate}"
NonCritical="{StaticResource NonCriticalTemplate}" />
</ItemsControl.ItemTemplateSelector>
And the DataTemplateSelector would be something similar to:
class CriticalItemSelector : DataTemplateSelector
{
public DataTemplate Critical
{
get;
set;
}
public DataTemplate NonCritical
{
get;
set;
}
public override DataTemplate SelectTemplate(object item,
DependencyObject container)
{
Message message = item as Message;
if(item != null)
{
if(message.IsCritical)
{
return Critical;
}
else
{
return NonCritical;
}
}
else
{
return null;
}
}
}
This way, WPF will automatically set anything that is critical to the template with the animation, and everything else will be the other template. This is also generic in that later on, you could use a different property to switch the templates and/or add more templates (A Low/Normal/High importance scheme).
It seems to be an odity with ColorAnimation, as it works fine with DoubleAnimation. You need to explicity specify the storyboards "TargetName" property to work with ColorAnimation
<Window.Resources>
<DataTemplate x:Key="NotificationTemplate">
<DataTemplate.Triggers>
<DataTrigger Binding="{Binding Path=IsCritical}" Value="true">
<DataTrigger.EnterActions>
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
Storyboard.TargetName="border"
From="#DDD" To="#FF0" Duration="0:0:0.7"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</DataTrigger.EnterActions>
</DataTrigger>
</DataTemplate.Triggers>
<Border x:Name="border" CornerRadius="5" Background="#DDD" >
<TextBlock Text="{Binding Text}" />
</Border>
</DataTemplate>
</Window.Resources>
<Grid>
<ItemsControl x:Name="NotificationItems" ItemsSource="{Binding}" ItemTemplate="{StaticResource NotificationTemplate}" />
</Grid>
Here's a solution that only starts the animation when the incoming property update is a certain value. Useful if you want to draw the user's attention to something with the animation, but afterwards the UI should return to it's default state.
Assuming IsCritical is bound to a control (or even an invisible control) you add NotifyOnTargetUpdated to the binding and tie an EventTrigger to the Binding.TargetUpdated event. Then you extend the control to only fire the TargetUpdated event when the incoming value is the one you are interested in. So...
public class CustomTextBlock : TextBlock
{
public CustomTextBlock()
{
base.TargetUpdated += new EventHandler<DataTransferEventArgs>(CustomTextBlock_TargetUpdated);
}
private void CustomTextBlock_TargetUpdated(object sender, DataTransferEventArgs e)
{
// don't fire the TargetUpdated event if the incoming value is false
if (this.Text == "False") e.Handled = true;
}
}
and in the XAML file ..
<DataTemplate>
..
<Controls:CustomTextBlock x:Name="txtCustom" Text="{Binding Path=IsCritical, NotifyOnTargetUpdated=True}"/>
..
<DataTemplate.Triggers>
<EventTrigger SourceName="txtCustom" RoutedEvent="Binding.TargetUpdated">
<BeginStoryboard>
<Storyboard>..</Storyboard>
</BeginStoryboard>
</EventTrigger>
</DataTemplate.Triggers>
</DataTemplate>
You use style triggers in this case. (I'm doing this from memory so there might be some bugs)
<Style TargetType="Border">
<Style.Triggers>
<DataTrigger Binding="{Binding IsCritical}" Value="true">
<Setter Property="Triggers">
<Setter.Value>
<EventTrigger RoutedEvent="Border.Loaded">
<BeginStoryboard>
<Storyboard>
<ColorAnimation
Storyboard.TargetProperty="Background.Color"
From="#DDD" To="#FF0" Duration="0:0:0.7"
AutoReverse="True" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Setter.Value>
</Setter>
</DataTrigger>
</Style.Triggers>
</Style>

Resources