I want to create a control that's composed of a number of circling Ellipse objects, like this (excerpt):
<Canvas Width="100" Height="100">
<Canvas Width="100" Height="100">
<Ellipse Canvas.Left="46"
Width="8"
Height="8"
Fill="White" />
<Canvas.RenderTransform>
<RotateTransform x:Name="r0" Angle="0" CenterX="50" CenterY="50" />
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:0"
Storyboard.TargetName="r0"
Storyboard.TargetProperty="Angle"
To="360"
Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
<Canvas Width="100" Height="100">
<Ellipse Canvas.Left="46"
Canvas.Top="10"
Width="8"
Height="8"
Fill="White" />
<Canvas.RenderTransform>
<RotateTransform x:Name="r1" Angle="0" CenterX="50" CenterY="50" />
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:0.05"
Storyboard.TargetName="r1"
Storyboard.TargetProperty="Angle"
To="360"
Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
<Canvas Width="100" Height="100">
<Ellipse Canvas.Left="46"
Canvas.Top="20"
Width="8"
Height="8"
Fill="White" />
<Canvas.RenderTransform>
<RotateTransform x:Name="r2" Angle="0" CenterX="50" CenterY="50" />
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="0:0:0.1"
Storyboard.TargetName="r2"
Storyboard.TargetProperty="Angle"
To="360"
Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
<!-- ... -->
</Canvas>
Please note: All of the inner Canvas/Ellipse elements differ by:
Ellipse.Canvas.Top
RotateTransform.Name
DoubleAnimation.BeginTime
Now, I want to save me a lot of writing by creating a resource composed of:
The inner Canvas
The Ellipse therein
The RotateTransform therein
The EventTrigger therein
The DoubleAnimation within the Eventtrigger
My final control would rather resemble something like this:
<Canvas Width="100" Height="100">
{StaticResource myElem InnerTop=0, BeginTime="0:0:0.0"}
{StaticResource myElem InnerTop=10, BeginTime="0:0:0.05"}
{StaticResource myElem InnerTop=20, BeginTime="0:0:0.1"}
</Canvas>
Is something like this possible by utilizing Resources only?
Or do I need to create a custom control, run by Code-Behind properties, to achieve this?
In the following I will describe two approaches to your issue using data templating or a UserControl.
Items Control and Data Templates
You can create a small utility type that exposes the properties that you want to customize.
public class CirclingEllipseProperties
{
public double Top { get; set; }
public TimeSpan BeginTime { get; set; }
}
Create a data template for the circling ellipse item that binds these properties.
<DataTemplate x:Key="CirclingEllipseTemplate" DataType="{x:Type local:CirclingEllipseProperties}">
<Canvas Width="100" Height="100">
<Ellipse Canvas.Left="46"
Canvas.Top="{Binding Top}"
Width="8"
Height="8"
Fill="White" />
<Canvas.RenderTransform>
<RotateTransform x:Name="r0" Angle="0" CenterX="50" CenterY="50" />
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="{Binding BeginTime}"
Storyboard.TargetName="r0"
Storyboard.TargetProperty="Angle"
To="360"
Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</DataTemplate>
Create an ItemsControl with a Canvas as ItemsPanel. Assign the data template as ItemTemplate and add an x:Array with CirclingEllipseProperties for each element as ItemsSource. You could even bind a collection of these elements from a view model or code-behind dynamically.
<ItemsControl Width="100"
Height="100"
ItemTemplate="{StaticResource CirclingEllipseTemplate}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemsSource>
<x:Array Type="{x:Type local:CirclingEllipseProperties}">
<local:CirclingEllipseProperties BeginTime="0:0:0" Top="0" />
<local:CirclingEllipseProperties BeginTime="0:0:0.05" Top="10" />
<local:CirclingEllipseProperties BeginTime="0:0:0.1" Top="20" />
</x:Array>
</ItemsControl.ItemsSource>
</ItemsControl>
Of course, you can also create a style for the ItemsControl, if you want to reuse it.
<Style x:Key="CirclingEllipseItemsControlStyle" TargetType="{x:Type ItemsControl}">
<Setter Property="Width" Value="100" />
<Setter Property="Height" Value="100" />
<Setter Property="ItemTemplate" Value="{StaticResource CirclingEllipseTemplate}" />
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Canvas />
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
</Style>
<ItemsControl Style="{StaticResource CirclingEllipseItemsControlStyle}">
<ItemsControl.ItemsSource>
<!-- ...items source as above. -->
</ItemsControl.ItemsSource>
</ItemsControl>
Create a User Control
Create a custom UserControl that exposes properties for Top and BeginTime.
<UserControl x:Class="YourApp.CirclingEllipseUserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:YourApp"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Width="100"
Height="100"
mc:Ignorable="d">
<Canvas>
<Ellipse Canvas.Left="46"
Canvas.Top="{Binding Top, RelativeSource={RelativeSource AncestorType={x:Type local:CirclingEllipseUserControl}}}"
Width="8"
Height="8"
Fill="White" />
<Canvas.RenderTransform>
<RotateTransform x:Name="r0" Angle="0" CenterX="50" CenterY="50" />
</Canvas.RenderTransform>
<Canvas.Triggers>
<EventTrigger RoutedEvent="Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation BeginTime="{Binding BeginTime, RelativeSource={RelativeSource AncestorType={x:Type local:CirclingEllipseUserControl}}}"
Storyboard.TargetName="r0"
Storyboard.TargetProperty="Angle"
To="360"
Duration="0:0:1.5" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Canvas.Triggers>
</Canvas>
</UserControl>
public partial class CirclingEllipseUserControl : UserControl
{
public static readonly DependencyProperty BeginTimeProperty = DependencyProperty.Register(
"BeginTime", typeof(TimeSpan), typeof(CirclingEllipseUserControl), new PropertyMetadata(TimeSpan.Zero));
public static readonly DependencyProperty TopProperty = DependencyProperty.Register(
"Top", typeof(double), typeof(CirclingEllipseUserControl), new PropertyMetadata(0.0));
public double Top
{
get => (double)GetValue(TopProperty);
set => SetValue(TopProperty, value);
}
public TimeSpan BeginTime
{
get => (TimeSpan)GetValue(BeginTimeProperty);
set => SetValue(BeginTimeProperty, value);
}
public CirclingEllipseUserControl()
{
InitializeComponent();
}
}
Add instances of the CirclingEllipseUserControl to your Canvas or create a DataTemplate for it like in the approach above to be able to dynamically bind items.
<Canvas Width="100" Height="100">
<local:CirclingEllipseUserControl BeginTime="0:0:0" Top="0" />
<local:CirclingEllipseUserControl BeginTime="0:0:0.05" Top="10" />
<local:CirclingEllipseUserControl BeginTime="0:0:0.1" Top="20" />
</Canvas>
Related
In my example app, I have a inner grid's height binded to the main grid's height. When I maximise and minimise the window, their heights are the same. after I execute an animation that changes the inner grid's height from 100 to binding the main grid's height again, the binding is lost. This is evident because when I maximise the window, the inner grids height remains the same while the main grid's height changes to fit the fill height of the window
Why is this and how can I fix it so the inner grid retains the main grid's height after I've set it back to that after an animation.
Example app:
<Window.Resources>
<Storyboard x:Key="ShrinkSlider" x:Name="ShrinkSlider"
Completed="ShrinkSlider_Completed">
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="gridSlider"
DecelerationRatio="0.9"
From="100"
To="{Binding ActualHeight, ElementName=gridMain}"
Duration="00:00:00.5" />
</Storyboard>
<Storyboard x:Key="ExpandSlider" x:Name="ExpandSlider"
Completed="ExpandSlider_Completed">
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="gridSlider"
DecelerationRatio="0.9"
From="{Binding ActualHeight, ElementName=gridMain}"
To="100"
Duration="00:00:00.5" />
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click"
SourceName="btnShrink">
<BeginStoryboard x:Name="bsbShrinkSlider"
Storyboard="{StaticResource ShrinkSlider}" />
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click"
SourceName="btnExpand">
<BeginStoryboard x:Name="bsbExpandSlider"
Storyboard="{StaticResource ExpandSlider}" />
</EventTrigger>
</Window.Triggers>
<Grid x:Name="gridMain">
<Grid x:Name="gridSlider"
Background="#1f1f1f"
VerticalAlignment="Top"
Height="{Binding ActualHeight, ElementName=gridMain}">
</Grid>
<StackPanel VerticalAlignment="Bottom">
<Button Content="Shrink"
x:Name="btnShrink"
Height="20"
Click="BtnShrink_Click" />
<Button Content="Expand"
x:Name="btnExpand"
Height="20"
Click="BtnExpand_Click" />
</StackPanel>
</Grid>
Okay so I figured it out. I needed to set Storyboard FillBehaviour = "Stop"
Then I needed to recreate the binding on the Storyboard Completed event:
Binding binding = new Binding();
binding.Source = gridMain;
binding.Path = new PropertyPath(Grid.ActualHeightProperty);
gridSlider.SetBinding(Grid.HeightProperty, binding);
Here is the full code amended:
xaml:
<Window.Resources>
<Storyboard x:Key="ShrinkSlider" x:Name="ShrinkSlider"
Completed="ShrinkSlider_Completed"
FillBehavior="Stop">
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="gridSlider"
DecelerationRatio="0.9"
From="{Binding ActualHeight, ElementName=gridMain}"
To="100"
Duration="00:00:00.5" />
</Storyboard>
<Storyboard x:Key="ExpandSlider" x:Name="ExpandSlider"
Completed="ExpandSlider_Completed"
FillBehavior="Stop">
<DoubleAnimation
Storyboard.TargetProperty="Height"
Storyboard.TargetName="gridSlider"
DecelerationRatio="0.9"
From="100"
To="{Binding ActualHeight, ElementName=gridMain}"
Duration="00:00:00.5" />
</Storyboard>
</Window.Resources>
<Window.Triggers>
<EventTrigger RoutedEvent="ButtonBase.Click"
SourceName="btnShrink">
<BeginStoryboard x:Name="bsbShrinkSlider"
Storyboard="{StaticResource ShrinkSlider}" />
</EventTrigger>
<EventTrigger RoutedEvent="ButtonBase.Click"
SourceName="btnExpand">
<BeginStoryboard x:Name="bsbExpandSlider"
Storyboard="{StaticResource ExpandSlider}" />
</EventTrigger>
</Window.Triggers>
<Grid x:Name="gridMain">
<Grid x:Name="gridSlider"
Background="#1f1f1f"
VerticalAlignment="Top"
Height="{Binding ActualHeight, ElementName=gridMain}">
</Grid>
<StackPanel VerticalAlignment="Bottom">
<Button Content="Shrink"
x:Name="btnShrink"
Height="20" />
<Button Content="Expand"
x:Name="btnExpand"
Height="20" />
</StackPanel>
</Grid>
cs:
private void ShrinkSlider_Completed(object sender, EventArgs e)
{
gridSlider.Height = 100;
}
private void ExpandSlider_Completed(object sender, EventArgs e)
{
Binding binding = new Binding();
binding.Source = gridMain;
binding.Path = new PropertyPath(Grid.ActualHeightProperty);
gridSlider.SetBinding(Grid.HeightProperty, binding);
}
I have WPF view, where I use buttons with style that I created by myself. In this style I use some icon from resources, that I pass by TemplateBinding.
Unfortunately I faced strange problem: the resource is shown only at first occurrence of button with this style. In next buttons I have empty box.
Style:
<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="LightSlateGray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Rectangle Width="13" Height="15" x:Name="IconBrush">
<Rectangle.Fill>
<SolidColorBrush Color="DarkGray"></SolidColorBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<ContentPresenter Content="{TemplateBinding Button.Content}" />
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="IconBrush"
Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
To="Black" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="IconBrush"
Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
To="DarkGray" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usege:
<WrapPanel Grid.Column="2" Margin="20 0">
<Button Height="35" Width="35" Margin="3 3" Content="{StaticResource trash}" Style ="{StaticResource TransparentStyle}"/>
<Button Height="35" Width="35" Margin="3 3" Content="{StaticResource trash}" Style ="{StaticResource TransparentStyle}" />
</WrapPanel>
What is interesting, when I use another resources, they work at their first occurrences. So if I use another_res instead of trash, it works at first time.
How do I fix it?
EDIT:
Next tests show, that when I use any resource in style and problem repeats:
<VisualBrush.Visual>
<ContentPresenter Content="{DynamicResource some_resource}" />
</VisualBrush.Visual>
EDIT2:
The resource is defined in external source:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Icons.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
As canvas:
<Canvas x:Key="trash" Width="24" Height="24">
<Path Data="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" Fill="Black" />
</Canvas>
Don't define your Icons like(I hope this is your problem as this is what people usually do, and Image is a FrameworkElement):
<Image Source="Resources/SOF.gif" x:Key="trash"/>
Define them like:
<ImageBrush ImageSource="Resources/SOF.gif" x:Key="trash"/>
and use ImageBrush like(in your style):
<Rectangle Width="113" Height="95" x:Name="IconBrush" Fill="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Content}"/>
your Icons will be repeated on buttons like below:
Update:
try it like:
<VisualBrush x:Key="trash" >
<VisualBrush.Visual>
<Canvas Width="24" Height="24" >
<Path Data="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" Fill="Black" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
OutPut:(make sure to use Rectangle fill correctly as I have mentioned above)
I have set of images which are placed in pivot control.i want zoom in the image to a specific point and then go back to its normal size through animation.how can i do that.Any help will be appreciated.
<StackPanel>
<StackPanel.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="img"
Storyboard.TargetProperty="Height"
From="300"
To="600"
Duration="0:0:2">
</DoubleAnimation>
</Storyboard>
</StackPanel.Resources>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png"></Image>
</StackPanel>
first tip:-
avoid writing Resources into specific control. Instead define all resources into <Page.Resources>
Now, if you want to animate some control, then you have to use Scaling property of an element.
Check below code. here, I'm pointing out how to zoom the image on any event handler.
XAML code of control
<Image x:Name="img" Source="/Assets/image1.png" RenderTransformOrigin="0.5 0.5" >
<Image.RenderTransform>
<CompositeTransform x:Name="compositeTransform" />
</Image.RenderTransform>
</Image>
Defining Storyborad
<phone:PhoneApplicationPage.Resources>
<Storyboard x:Name="story">
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleX"
From="0" To="5"
Duration="0:0:2" />
<DoubleAnimation Storyboard.TargetName="compositeTransform"
Storyboard.TargetProperty="ScaleY"
From="0" To="5"
Duration="0:0:2" />
</Storyboard>
</phone:PhoneApplicationPage.Resources>
On any of the event handler
story.Begin();
Hope that helps..
If I understand your problem, then you should use the Storyboard, EventTrigger and ScaleX Instead of Height for Resize image.
Storyboarded and trigger animations
Here is one option for the loaded event.
<StackPanel>
<Button Height="100" Width="100" Click="Button_Click"></Button>
<Image x:Name="img" Height="300" Width="200" Source="/Assets/10.png">
<Image.RenderTransform>
<ScaleTransform x:Name="ImageScale" ScaleX="1" ScaleY="1"/>
</Image.RenderTransform>
<Image.Triggers>
<EventTrigger RoutedEvent="Image.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleX)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
<DoubleAnimation Storyboard.TargetName="ImageScale" Storyboard.TargetProperty="(ScaleTransform.ScaleY)" To="1.5" Duration="0:0:0.7" AutoReverse="True"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Image.Triggers>
</Image>
</StackPanel>
I am trying to do some binding. For the most part, my MVVM application is working fine but I now want to use a Template. In this case, I'm using XCeed chart which expose a SeriesTemplate.
My code is:
<UserControl
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
x:Class="MyApp.AppUi.View.Graph.GraphView"
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"
xmlns:converter="clr-namespace:MyApp.AppUi.Converters"
>
<Grid>
<Grid.Resources>
<converter:MyIntConverter x:Key="MyIntConverter" />
<DataTemplate x:Key="MyLabelTemplate">
<TextBlock Text="{Binding Path=Text, Converter={StaticResource MyIntConverter}}" />
</DataTemplate>
<!--give it a name, Bind to above, choose property -->
<CollectionViewSource x:Key="GraphDataCollection" Source="{Binding GraphDataList}" />
<Style x:Key="TextBoxTextStyle" TargetType="TextBlock">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="FontFamily" Value="Comic Sans MS"/>
<Setter Property="FontSize" Value="12"/>
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="19" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="FontSize" To="12" Duration="0:0:0.4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter/>
</ControlTemplate>
</Setter.Value>
</Setter>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Grid Width="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"
Height="{Binding Path=ActualHeight, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}">
<Rectangle RadiusX="5" RadiusY="5" >
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="0.8" Duration="0:0:0.4"/>
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard>
<Storyboard>
<DoubleAnimation Storyboard.TargetProperty="Opacity" To="1" Duration="0:0:0.4" />
</Storyboard>
</BeginStoryboard>
</EventTrigger.Actions>
</EventTrigger>
</Rectangle.Triggers>
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
<GradientStop Color="#FFffcf26" Offset="0.0" />
<GradientStop Color="#FFff7f04" Offset="1.0" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<ContentPresenter VerticalAlignment="Center" Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="SeriesTemplate">
<Button>
<StackPanel>
<TextBlock Text="{Binding GraphData.ShortDate}" Style="{StaticResource TextBoxTextStyle}" />
</StackPanel>
</Button>
</DataTemplate>
</Grid.Resources>
<GroupBox Header="{Binding Title}">
<GroupBox.Background>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0" >
<GradientStop Offset="0" Color="#FF9d9d9d" />
<GradientStop Offset="1" Color="#FF666666" />
</LinearGradientBrush>
</GroupBox.Background>
<xctk:Chart Height="400" Width="400" ShowLegend="False">
<xctk:Chart.Areas>
<xctk:Area >
<xctk:Area.XAxis>
<xctk:Axis Title="Date"
GraduationMode="Manual"
LabelsType="DateTime"
ScaleMode="Automatic"
TitleMargin="10"
AxisLabelsLayout="ShowAll"
ShowArrow="False"
ShowAxis="True"
ShowGridLines="True"
ShowTicks="True"
ShowTickLabels="True"
ShowAxisLabel="True"
Reversed="False"
/>
</xctk:Area.XAxis>
<xctk:Area.YAxis>
<xctk:Axis Title="Google position"
ScaleMode="Manual"
TitleMargin="10"
AxisLabelsLayout="ShowAll"
ShowArrow="False"
ShowAxis="True"
ShowGridLines="True"
CustomRangeStart="1.00"
CustomRangeEnd="111.00"
ShowTicks="True"
ShowTickLabels="True"
ShowAxisLabel="True"
Reversed="False"
LabelTemplate="{StaticResource MyLabelTemplate}"
/>
</xctk:Area.YAxis>
<xctk:Area.Series>
<xctk:Series DataPointsSource="{Binding Source={StaticResource GraphDataCollection}}"
Template="{StaticResource SeriesTemplate}"
ShowPointsInLegend="true">
<xctk:Series.DataPointBindings>
<xctk:BindingInfo PropertyName="Y">
<xctk:BindingInfo.Binding>
<Binding Path="Position"/>
</xctk:BindingInfo.Binding>
</xctk:BindingInfo>
<xctk:BindingInfo PropertyName="X">
<xctk:BindingInfo.Binding>
<Binding Path="Date"/>
</xctk:BindingInfo.Binding>
</xctk:BindingInfo>
<xctk:BindingInfo PropertyName="Label">
<xctk:BindingInfo.Binding>
<Binding Path="ShortDate"/>
</xctk:BindingInfo.Binding>
</xctk:BindingInfo>
</xctk:Series.DataPointBindings>
</xctk:Series>
</xctk:Area.Series>
</xctk:Area>
</xctk:Chart.Areas>
</xctk:Chart>
</GroupBox>
</Grid>
and my ViewModel
public class GraphViewModel : BaseViewModel
{
public GraphViewModel(List<GraphData> data, string title )
{
this.GraphDataList = data;
this.Title = title;
}
public string Title { get; private set; }
public List<GraphData> GraphDataList { get; private set; }
}
And the DataContext is set in the Resource Dictionary
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:graphView="clr-namespace:MyApp.AppUi.View.Graph"
xmlns:graphViewModel="clr-namespace:MyApp.AppUi.ViewModel.Graph"
xmlns:converter="clr-namespace:MyApp.AppUi.Converters"
>
<DataTemplate DataType="{x:Type graphViewModel:GraphViewModel}">
<graphView:GraphView />
</DataTemplate>
The chart displays as desired but, the SeriesTemplate does not bind. There is an error message in the ouput window, which I understand what the message is saying, but not how to fix it.
The error message is
System.Windows.Data Error: 40 : BindingExpression path error: 'ShortDate' property not found on 'object' ''ColumnPrimitiveInfo' (HashCode=39288004)'. BindingExpression:Path=ShortDate; DataItem='ColumnPrimitiveInfo' (HashCode=39288004); target element is 'TextBlock' (Name=''); target property is 'Text' (type 'String')
How do I get the binding to work for
<DataTemplate x:Key="SeriesTemplate">
<Button x:Name="Bar">
<StackPanel>
<TextBlock Text="{Binding GraphData.ShortDate}" Style="{StaticResource TextBoxTextStyle}" /> <!--THIS IS WHERE THE FAULT IS -->
</StackPanel>
</Button>
</DataTemplate>
XCeed have a working demo with source code, if you download the application, click on Charts -> Styling -> Column Series you can see that my code is very very similar. There's works, but mine does not and I can't see why. Please note, the graph itself displays, it's just the textbox is not showing. However, if I don't use binding, and just use Text="SomeWords" then it works fine
After a few hours of voodoo programming (where I just try different things at random) I found the solution.
<TextBlock Text="{Binding Path=Content.ShortDate}" Style="{StaticResource TextBoxTextStyle}" />
I think this is because of (see the Button Setter in code of OP)
<ContentPresenter VerticalAlignment="Center" Content="{Binding Path=Content, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Button}}}"/>
Try this:
<DataTemplate x:Key="SeriesTemplate">
<Button>
<StackPanel>
<TextBlock Text="{Binding Path=ShortDate}" Style="{StaticResource TextBoxTextStyle}" />
</StackPanel>
</Button>
</DataTemplate>
From looking at the documentation hereon the XCeed documentation site it appears that you are adding an extra layer of indirection to the binding. Try binding directly to the GraphDataList
<xctk:Series DataPointsSource="{Binding Source={StaticResource GraphDataList}}"
Template="{StaticResource SeriesTemplate}"
ShowPointsInLegend="true">
and then in the series
<DataTemplate x:Key="SeriesTemplate">
<Button>
<StackPanel>
<TextBlock Text="{Binding Path=ShortDate}" Style="{StaticResource TextBoxTextStyle}" />
</StackPanel>
</Button>
</DataTemplate>
I'm new to Storyboard animations but I think this might be a problem I can't workaround the easy way. Nevertheless I try my luck here, maybe some of you guys know how to help me.
My Scenario : I want to show a popup in my Application that has a fadein effect. I also want to do this via MVVM so my control that wraps the fadein effect and the popup should no use codebehind and my application should just need to reset the datacontext of this control to a new viewmodel to show a new message.
My Problem is that I cannot determine when the animation is finished because I need to set the fadein Animation in the style.
My XAML looks like this :
<UserControl.Resources>
<Style x:Key="popupStyle" TargetType="{x:Type Border}" >
<Style.Triggers>
<Trigger Property="Visibility" Value="Visible">
<Trigger.EnterActions>
<BeginStoryboard>
<Storyboard x:Name="FadingStoryBoard">
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.05" To="1" BeginTime="0:0:1" Duration="0:0:2.5" >
<DoubleAnimation.EasingFunction>
<ExponentialEase Exponent="5" EasingMode="EaseIn" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Storyboard.TargetProperty="Opacity" From="1" To="0" BeginTime="0:0:6" Duration="0:0:8.5" >
<DoubleAnimation.EasingFunction>
<ExponentialEase Exponent="15" EasingMode="EaseOut" />
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</BeginStoryboard>
</Trigger.EnterActions>
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
<Popup Name="Popup" IsOpen="{Binding IsVisible}" Height="{Binding PopupHeight}" Width="{Binding PopupWidth}" VerticalOffset="{Binding PopupVerticalOffset}" HorizontalOffset="{Binding PopupHorizontalOffset}" PopupAnimation="Fade" AllowsTransparency="True">
<Border Style="{StaticResource popupStyle}" Name="PopupContent" Padding="1" BorderBrush="#000000" Background="AliceBlue" CornerRadius="5" BorderThickness="3,3,3,3">
<!-- Events -->
<interact:Interaction.Triggers>
<interact:EventTrigger EventName="PreviewMouseDown">
<cmd:EventToCommand Command="{Binding Path=PopupMouseDownCommand}" PassEventArgsToCommand="True" />
</interact:EventTrigger>
</interact:Interaction.Triggers>
<DockPanel Name="ContentContainer" Background="Black" LastChildFill="True">
<Image Source="{Binding MessageIcon}" DockPanel.Dock="Left" Margin="5,0,5,0" Width="32" Height="32" />
<StackPanel Background="Transparent" DockPanel.Dock="Right" Margin="3">
<TextBlock Name="PopupHeaderTextBlock" Margin="0,3,0,5" TextWrapping="Wrap" FontSize="10" Text="{Binding PopupHeaderText}" Foreground="White" Background="Transparent" />
<TextBlock Name="PopupTextBlock" Text="{Binding PopupText}" TextWrapping="Wrap" FontSize="10" Foreground="White" Background="Transparent" />
</StackPanel>
</DockPanel>
</Border>
</Popup>
Anyone any ideas how I can get a notification in my ViewModel when the Storyboard has finished ?
You can handle the Completed event on the storyboard.
Documentation Here: http://msdn.microsoft.com/en-us/library/system.windows.media.animation.timeline.completed.aspx
Here's the code to attach the event from the codebehind:
call from the constructor:
private void AttachToCompletedEvent()
{
Style popupStyle = Resources["popupStyle"];
TriggerBase trigger = popupStyle.Triggers[0];
BeginStoryboard action = trigger.EnterActions[0] as BeginStoryboard;
Storyboard storyboard = action.Storyboard;
storyboard.Completed += CompletedEventHandler;
}
I think that should work for the code you provided.