I am using WPF Toolkit to draw a line chart (a feature on our application). Given a Collection, I am able to plot the graph, however, when the user double clicks on the DataPoint on the graph, I am finding it difficult to get the X and Y data value (not the Co-Ordinate value in the line graph).
I am able to set property using DataPointStyle, but unable to add event to it.
If I use MouseDoubleClick="lineChart_ShowResults_DoubleClick" property on the LineSeries node, then it triggers an event when user clicks on any point. But, I need to trigger the event only if the user clicks on the DataPoint. The following is the XAML that I tried to implement. Please help.
<Window x:Class="TeamXXX.YYYUI.GraphicalDisplay"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="GraphicalDisplay" Height="400" Width="600" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" mc:Ignorable="d" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" d:DesignHeight="439" d:DesignWidth="654" SizeToContent="WidthAndHeight">
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<Grid MinHeight="360" MinWidth="575" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<chartingToolkit:Chart Name="lineChart" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Height" Value="0" />
<Setter Property="Width" Value="0" />
</Style>
</chartingToolkit:Chart.LegendStyle>
<chartingToolkit:LineSeries DependentValuePath="Value" Name="lineSeries" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" MouseDoubleClick="lineChart_ShowResults_DoubleClick">
<!--<chartingToolkit:LineSeries.DataPointStyle>
<Style x:Uid="CommonLineSeriesDataPoint" TargetType="chartingToolkit:LineDataPoint">
<Setter Property="" Property="lineChart_ShowResults_DoubleClick"/>
</Style>
</chartingToolkit:LineSeries.DataPointStyle>-->
<chartingToolkit:LineSeries.DependentRangeAxis>
<chartingToolkit:LinearAxis Orientation="Y" Title="Cost in minutes" FontSize="16" />
</chartingToolkit:LineSeries.DependentRangeAxis>
<chartingToolkit:LineSeries.IndependentAxis>
<chartingToolkit:LinearAxis Orientation="X" Title="Fold" FontSize="16" />
</chartingToolkit:LineSeries.IndependentAxis>
</chartingToolkit:LineSeries>
</chartingToolkit:Chart>
</Grid>
</ScrollViewer>
</Window>
As you said, The event triggers upon a click on any of the points because the event is assigned to the LineSeries. On this line (from your post)
<chartingToolkit:LineSeries DependentValuePath="Value" Name="lineSeries" IndependentValuePath="Key" ItemsSource="{Binding}" IsSelectionEnabled="True" MouseDoubleClick="lineChart_ShowResults_DoubleClick">
You were in the right path by going into LineSeries.DataPointStyle but I believe that you should define an event setter instead of a setter.
Like this:
<chartingToolkit:LineSeries.DataPointStyle>
<Style>
<EventSetter>
<EventSetter Event="Control.MouseDoubleClick" Handler="lineChart_ShowResults_DoubleClick"/>
</EventSetter>
</Style> </chartingToolkit:LineSeries.DataPointStyle>
</chartingToolkit:LineSeries.DataPointStyle>
And obviously remove the event handling on the LineSeries.
I did not try it, let me know if it works
Related
I have a line chart where i have the itemsource bound to a list. Is it possible to attach different labels to each data point?
<Grid>
<chartingToolkit:Chart HorizontalAlignment="Left" Name="LineChart1" Width="880" Height="400" Margin="69,36,0,0" VerticalAlignment="Top">
<chartingToolkit:Chart.Series>
<chartingToolkit:LineSeries Name="Line1" DependentValuePath="Value"
IndependentValuePath="Key"
IsSelectionEnabled="True" ItemsSource="{Binding Path=SourceList, Mode=TwoWay}">
<chartingToolkit:DataPointSeries.DataPointStyle>
<Style BasedOn="{StaticResource NewDataPointStyle}"
TargetType="{x:Type chartingToolkit:LineDataPoint}">
</Style>
</chartingToolkit:DataPointSeries.DataPointStyle>
</chartingToolkit:LineSeries>
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
</Grid>
I can apply a background image to a StackPanel with this XAML code:
<StackPanel>
<StackPanel.Background>
<ImageBrush ImageSource="bg.png" Stretch="Uniform" AlignmentY="Bottom" />
</StackPanel.Background>
...
</StackPanel>
But that's kind of a lot to type when applied to multiple StackPanels. So I'd rather define a Style (aka Static Resource?) that I can quickly apply to the individual StackPanels.
So I started writing this:
<Window.Resources>
<ImageBrush x:Key="SpBg" ImageSource="bg.png" Stretch="Uniform" AlignmentY="Bottom" />
<Style x:Key="StackPanelBg" TargetType="StackPanel">
<!-- begin invalid xaml -->
<Setter Property="Background" Value="SpBg" />
<!-- end invalid xaml -->
</Style>
</Window.Resources>
So that I'd be able to do this:
<StackPanel Style="{StaticResource StackPanelBg}">
...
</StackPanel>
Except that doesn't work; the Setter line isn't correct. How can I make this work?
Like that:
<Window x:Class="WpfApplication12.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>
<ImageBrush x:Key="SpBg" ImageSource="bg.png" Stretch="Uniform" AlignmentY="Bottom" />
<Style x:Key="StackPanelBg" TargetType="StackPanel">
<Setter Property="Background" Value="{StaticResource SpBg}" />
</Style>
</Window.Resources>
<StackPanel Style="{StaticResource StackPanelBg}">
</StackPanel>
</Window>
I know that Silverlight 5 introduces the data binding in styles. I want to bind the source of image which is present in content template in the style of a button.
I am using the below code where I am trying to set the image source property in style.
// Style
<UserControl x:Class="MGPIControls_Simple.ButtonControl"
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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
Height="40" Width="40"
mc:Ignorable="d" x:Name="ButtonControlSample">
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.Resources>
<Style x:Key="ImageButtonStyle" TargetType="Button">
<Setter Property="BorderBrush" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<!-- binding in style -->
<Image Source="{Binding ImageSource}"
VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
Stretch="Fill"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Button x:Name="ButtonBase" Style="{StaticResource ImageButtonStyle}"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch"/>
</Grid>
Where ImageSource is the dependency property I have created. If I dont bind the image source property and keep it static to some image url the things are working fine but binding is not working. Please let me know where I am wrong in above approach.
You have to use binding like
<TextBlock Text="{Binding Path=DataContext.BusyText, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=UserControl}}"
Well, how to put this... what you try to do is not the new Silverlight 5 feature Binding in Styles. This kind of binding is always possible, even with older Silverlight versions.
You have a DataTemplate and that means any binding you declare is evaluated when actual UI elements are instantiated from the template. And your binding Source="{Binding ImageSource}" is evaluated against your Button's DataContext.
If there is no public property ImageSource then your Button won't show any image.
I am working on a C# WPF project and I am having an issue with setting the row colour within the data grid when the mouse is hovering over the row and then reset the row back to how it was before the mouse over.
When I try add the style trigger to the XAML I then get an exception thrown.
Below is the XAML code
<UserControl x:Class="ReportReader.UserControls.ReportViewer"
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:DesignWidth="1024" d:DesignHeight="800" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit">
<Grid>
<Label Content="Report for..." Margin="12,12,12,0" Name="lblReportDateTitle" FontSize="26" FontWeight="Bold" HorizontalContentAlignment="Center" Height="44" VerticalAlignment="Top" />
<ComboBox Height="23" HorizontalAlignment="Left" Margin="12,62,0,0" Name="cboRegisteredApps" VerticalAlignment="Top" Width="202" SelectionChanged="cboRegisteredApps_SelectionChanged">
<ComboBoxItem Content="Select App" IsSelected="True" />
</ComboBox>
<DataGrid RowStyle="{StaticResource gridCellStyle}" AutoGenerateColumns="True" Margin="14,415,12,12" Name="dataExceptionGroups" IsReadOnly="True" ColumnWidth="*">
</DataGrid>
<chartingToolkit:Chart DataContext="1,10 2,20 3,30 4,40" Margin="0,118,12,0" Name="chartExceptionStatusPieGraph" Title="Chart Title" HorizontalAlignment="Right" Width="408" Height="291" VerticalAlignment="Top">
<chartingToolkit:PieSeries DependentValuePath="Value" IndependentValuePath="Key" ItemsSource="{Binding}" />
</chartingToolkit:Chart>
</Grid>
<UserControl.Resources>
<Style x:Key="gridCellStyle" TargetType="{x:Type DataGridRow}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Background" Value="Blue" />
</Trigger>
</Style.Triggers>
</Style>
</UserControl.Resources>
</UserControl>
Below is the exception that I get
'Provide value on 'System.Windows.StaticResourceExtension' threw an
exception.' Line number '11' and line position '110'.
Thanks for any help you can provide.
XAML is parsed from top to bottom and all StaticResource references are resolved at runtime while loading XAML. But resource gridCellStyle is defined below its usage that's why parser is unable to locate resource.
Either move the style before its usage (declare resources before userControl content) -
<UserControl>
<UserControl.Resources>
<Style x:Key="gridCellStyle">...</Style>
</UserControl.Resources>
<Grid>...</Grid>
</UserControl>
Or use DynamicResource in case resource is defined below its usage -
<DataGrid RowStyle="{DynamicResource gridCellStyle}">
I've got the following user-control:
Resources:
<DataTemplate x:Key="FilterComboDataTemplate">
<Label Content="{Binding Item2}" />
</DataTemplate>
<Style x:Key="FilterSelectorStyle" TargetType="ComboBox">
<Setter Property="ItemsSource" Value="{Binding Filters}" />
<Setter Property="SelectedItem" Value="{Binding SelectedFilter}" />
<Setter Property="ItemTemplate" Value="{StaticResource FilterComboDataTemplate}" />
</Style>
Control Body:
<DockPanel>
<Label DockPanel.Dock="Top">
Select your filter/value to apply:
</Label>
<ComboBox Style="{StaticResource FilterSelectorStyle}" />
<StackPanel>
<!-- TODO: Fix Combobox First -->
</StackPanel>
</DockPanel>
It's inside a <Window> and opened using .ShowDialog(), this is what happens to the items when I click on the button:
Undesirable Results http://img827.imageshack.us/img827/1561/whyowhy.png
I'm at a complete loss as to why this is happening, I've checked the visual tree, everything's where it should be. I'm baffled. Anyone out there experienced strange behavior like this? Why are my items at 0,0 on my desktop instead of attached to my combobox?
I quickly coded this. Didn't have any problem.
<Window
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:WpfApplication5="clr-namespace:WpfApplication5" x:Class="WpfApplication5.MainWindow"
x:Name="MyWindow"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<DataTemplate x:Key="FilterComboDataTemplate">
<Label Content="{Binding Item2}" />
</DataTemplate>
</Window.Resources>
<DockPanel>
<Label DockPanel.Dock="Top">
Select your filter/value to apply:
</Label>
<ComboBox Height="32" ItemsSource="{Binding Filters, ElementName=MyWindow}" ItemTemplate="{DynamicResource FilterComboDataTemplate}"/>
<StackPanel>
<!-- TODO: Fix Combobox First -->
</StackPanel>
</DockPanel>
</Window>
Also, I've never seen any one putting ItemSource and SelectedItem in a style. I don't think that's a good WPF practice. I will rather bind to a ICollectionView which allows grouping, filtering, managing cursor etc