I'm porting my WP8.1 app to UWP and I discovered that the new universal ListView likes to mess around with the UI of DataTemplaes by adding some extra elements and logic (like some background colors when the mouse covers an item).
Let's say I have a very simple template like this:
<DataTemplate x:Key="IconsTemplate">
<Grid Width="40"
Height="40">
<Image Source="{Binding IconImage}"/>
</Grid>
</DataTemplate>
And this ListView:
<ListView ItemTemplate="{StaticResource IconsTemplate}"
ItemsSource="{x:Bind ViewModel.Source, Mode=OneWay}"
CanReorderItems="False">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
I'd expect to get, just like on WP8.1, a simple wrap grid with my 40*40 items with an image inside them. Instead, I get this:
Every item is rectangular instead of square (I mean, those are clearly not my 40*40 templates), and I also have an automatic logic on the background color of my templates.
I don't want any of that, I want my templates to be displayed exactly as they are, and I want to be able to manually set my logic for the pointer events.
I tried looking at the default ListView template but I didn't find anything useful there, is there a parameter I'm missing or is there a way to just get the ListView to display the plain items like it used to do in WP8.1?
I managed to fix the issue by using a custom Style for the ListViewItems.
Here is the Style I used:
<Style TargetType="ListViewItem" x:Key="CustomListViewItemExpanded">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="True"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="HorizontalAlignment" Value="Stretch"/>
<Setter Property="VerticalAlignment" Value="Stretch"/>
<Setter Property="HorizontalContentAlignment" Value="Stretch"/>
<Setter Property="VerticalContentAlignment" Value="Stretch"/>
<Setter Property="MinWidth" Value="0"/>
<Setter Property="MinHeight" Value="0"/>
<Setter Property="UseSystemFocusVisuals" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Grid x:Name="ContentBorder"
BorderThickness="0">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOver">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PointerOverSelected">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="PressedSelected">
<Storyboard>
<PointerDownThemeAnimation TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DisabledStates">
<VisualState x:Name="Enabled"/>
<VisualState x:Name="Disabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="MultiSelectStates">
<VisualState x:Name="MultiSelectDisabled"/>
<VisualState x:Name="MultiSelectEnabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable"/>
<VisualState x:Name="DataPlaceholder"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualState x:Name="NoReorderHint"/>
<VisualState x:Name="BottomReorderHint"/>
<VisualState x:Name="TopReorderHint"/>
<VisualState x:Name="RightReorderHint"/>
<VisualState x:Name="LeftReorderHint"/>
<VisualStateGroup.Transitions>
<VisualTransition To="NoReorderHint" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
<VisualStateGroup x:Name="DragStates">
<VisualState x:Name="NotDragging" />
<VisualState x:Name="Dragging"/>
<VisualState x:Name="DraggingTarget"/>
<VisualState x:Name="MultipleDraggingPrimary"/>
<VisualState x:Name="MultipleDraggingSecondary"/>
<VisualState x:Name="DraggedPlaceholder"/>
<VisualStateGroup.Transitions>
<VisualTransition To="NotDragging" GeneratedDuration="0:0:0.2"/>
</VisualStateGroup.Transitions>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ContentPresenter x:Name="ContentPresenter"
ContentTransitions="{TemplateBinding ContentTransitions}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
Margin="{TemplateBinding Padding}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This will disable all the VisualStates, it will remove all the unnecessary controls that were present in the template and will allow each item to be rendered with its original size.
Related
I'm trying to change the font color of a button when the button is clicked. I have tried many different things but none have worked. This is the latest thing I tried and what I believe should be the answer but it's not working. Can someone help? PointerOver isworking fine, but Focused is not doing anything when the button is clicked.
After click I want the color to remain applied until another button is clicked, then the text in the new button clicked will change color and the previous button clicked will go back to the default color.
I have tried Pressed and focused state both but none is working.
<Style x:Key="ButtonMenuItemStyle"
TargetType="Button">
<Setter Property="Background"
Value="Transparent" />
<Setter Property="Foreground"
Value="{x:Bind ViewModel.LeftNavMenuPrimaryTextColor}" />
<Setter Property="BorderBrush"
Value="{ThemeResource ButtonBorderBrush}" />
<Setter Property="BorderThickness"
Value="0" />
<Setter Property="Padding"
Value="0" />
<Setter Property="AllowFocusOnInteraction"
Value="True" />
<Setter Property="HorizontalAlignment"
Value="Stretch" />
<Setter Property="VerticalContentAlignment"
Value="Stretch"></Setter>
<Setter Property="HorizontalContentAlignment"
Value="Stretch"></Setter>
<Setter Property="VerticalAlignment"
Value="Stretch" />
<Setter Property="Height"
Value="65"></Setter>
<Setter Property="FontFamily"
Value="{ThemeResource ContentControlThemeFontFamily}" />
<Setter Property="FontWeight"
Value="Normal" />
<Setter Property="FontSize"
Value="{ThemeResource ControlContentThemeFontSize}" />
<Setter Property="UseSystemFocusVisuals"
Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<ContentPresenter x:Name="ContentPresenter"
AutomationProperties.AccessibilityView="Raw"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}"
BorderBrush="{TemplateBinding BorderBrush}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
ContentTransitions="{TemplateBinding ContentTransitions}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
Padding="{TemplateBinding Padding}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource IconHoverColor}" />
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource IconHoverTextColor}" />
</ObjectAnimationUsingKeyFrames>
<PointerUpThemeAnimation Storyboard.TargetName="ContentPresenter" />
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource SignInDisableStateColor}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource IconHoverColor}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="PointerFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
Storyboard.TargetProperty="Foreground">
<DiscreteObjectKeyFrame KeyTime="0"
Value="{StaticResource IconHoverColor}" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused" />
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</ContentPresenter>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
After click I want the color to remain applied until another button is clicked, then the text in the new button clicked will change color and the previous button clicked will go back to the default color.
The focus state of the button works when the focus state is triggered from keyboard input. You could set the button's focus state in the code-behind to check if the VisualState works.
Like this:
MyButton.Focus(FocusState.Keyboard);
So want you need to do is put this line of code in the click event of the button.
I write in C# UWP. ScrollBar Styling doesn't work, but some ScrollViewer Styling is good.
My code behind:
Style ScrollBarStyle = new Style(typeof(ScrollBar));
ScrollBarStyle.Setters.Add(new Setter(ScrollBar.BackgroundProperty, new SolidColorBrush(Colors.Blue)));
Style ScrollViewerStyle = new Style(typeof(ScrollViewer));
ScrollViewerStyle.Setters.Add(new Setter(ScrollViewer.BackgroundProperty, new SolidColorBrush(Colors.Blue)));
Application.Current.Resources.Add(typeof(ScrollViewer), ScrollViewerStyle);
Application.Current.Resources.Add(typeof(ScrollBar), ScrollBarStyle);
I write in C# UWP. ScrollBar Style is not work, but some style ScrollViewer Style is good .
The color of ScrollBar background is Transparent in the default style. And the ScrollBar background color will be covered by root Grid. So you just need to change the background color of the root grid in order to change ScrollBar background color.
Usage
<SolidColorBrush x:Key="ScrollBarBackgroundBrush" Color="Red" />
<SolidColorBrush x:Key="ScrollBarPanningBackgroundBrush" Color="Blue" />
<Style TargetType="ScrollBar">
<Setter Property="MinWidth" Value="7" />
<Setter Property="MinHeight" Value="7" />
<Setter Property="Background" Value="Transparent" />
<Setter Property="Foreground" Value="Transparent" />
<Setter Property="BorderBrush" Value="Transparent" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ScrollBar">
<Grid x:Name="Root" Background="{StaticResource ScrollBarBackgroundBrush}">
<Grid x:Name="HorizontalPanningRoot" MinWidth="53">
<Rectangle
x:Name="HorizontalPanningThumb"
Height="2.4"
MinWidth="7"
HorizontalAlignment="Left"
AutomationProperties.AccessibilityView="Raw"
Fill="{StaticResource ScrollBarPanningBackgroundBrush}" />
</Grid>
<Grid x:Name="VerticalPanningRoot" MinHeight="53">
<Rectangle
x:Name="VerticalPanningThumb"
Width="2.4"
MinHeight="7"
VerticalAlignment="Top"
AutomationProperties.AccessibilityView="Raw"
Fill="{StaticResource ScrollBarPanningBackgroundBrush}" />
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal" />
<VisualState x:Name="PointerOver" />
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0.5"
Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ScrollingIndicatorStates">
<VisualState x:Name="TouchIndicator">
<Storyboard>
<FadeInThemeAnimation Storyboard.TargetName="HorizontalPanningRoot" />
<FadeInThemeAnimation Storyboard.TargetName="VerticalPanningRoot" />
</Storyboard>
</VisualState>
<VisualState x:Name="MouseIndicator" />
<VisualState x:Name="NoIndicator">
<Storyboard>
<FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="HorizontalPanningRoot" />
<FadeOutThemeAnimation BeginTime="0" Storyboard.TargetName="VerticalPanningRoot" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Set the root grid background color red.
It returns back to the original color even if selected when hover on it.
Why? How can I fix it?
This is the xaml:
I think it because the animation called even if it selected and canceled the selected color.
<Style x:Key="AcountComboItemContailner" TargetType="ComboBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="White" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="White" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="0" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You have one element with the name fillColor, and you have two different VisualStates that both manipulate it. And each of those states will set the opacity to 0.35 while active, and each of them will set it back to 0.00 as soon as the state is going inactive again.
You need to have separate elements to indicate the respective states with. Otherwise your states will always mess with each others visual representation.
<Style x:Key="AcountComboItemContailner" TargetType="ComboBoxItem">
<Setter Property="Padding" Value="3"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ComboBoxItem">
<Grid Background="{TemplateBinding Background}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fillColor2"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame Value="#4D4D4D"
KeyTime="0" />
</ObjectAnimationUsingKeyFrames>
<!--<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>-->
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="fillColor"
Storyboard.TargetProperty="Fill">
<DiscreteObjectKeyFrame Value="#4D4D4D"
KeyTime="0" />
</ObjectAnimationUsingKeyFrames>
<!--<DoubleAnimation Duration="0" To=".35" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor"/>-->
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="FocusVisualElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Rectangle x:Name="fillColor" Fill="Transparent" IsHitTestVisible="False" Opacity="1" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="Transparent" IsHitTestVisible="False" Opacity="1" RadiusY="1" RadiusX="1"/>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}"/>
<Rectangle x:Name="FocusVisualElement" RadiusY="1" RadiusX="1" Stroke="#FF6DBDD1" StrokeThickness="0" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
thanks this is actually the solution!
I have this button:
<Button HorizontalAlignment="Stretch" Content="EXIT" Style="{StaticResource RedButton}" />
and its style:
<Style x:Key="RedButton" TargetType="Button">
<Setter Property="Background" Value="Red" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="Border" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
But all it does it complain, on the button: "Cannot resolve TargetName Border"
I'm trying to style the pressed visual state for the button. Does anyone know whats wrong?
Try the following link for customization of your button using a ControlTemplate: http://msdn.microsoft.com/en-us/library/cc903963%28v=vs.95%29.aspx
In your XAML code In the Pressed State you are trying to modify a target called Border. The problem is that in your grid there is no such element. There is not border added to the grid nor there is a property called border available for a grid. And when you go to edit current template, it only shows a grid. There are nothing inside the grid. My advice is to discard the current style and create a new one. No need to mess with XAML because you can easily get this done using Blend for VS.
Try this tutorial, Explains from beginning to end how to customize a Button Style.
http://wpdevkvk.wordpress.com/2014/07/17/custom-xaml-controllers-i-adding-custom-styles-to-elements/
There's obviously no Border element to apply the color to.
What happens if you create a style like this one:
<Style x:Key="RedButtonStyle" TargetType="Button">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderBrush" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="BorderThickness" Value="{StaticResource PhoneBorderThickness}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilySemiBold}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeMedium}"/>
<Setter Property="Padding" Value="10,5,10,6"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid Background="Transparent">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver"/>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetName="ButtonBackground" Storyboard.TargetProperty="Background">
<DiscreteObjectKeyFrame KeyTime="0" Value="Red" />
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentContainer">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PhoneDisabledBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="ButtonBackground">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="ButtonBackground" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="0" Margin="{StaticResource PhoneTouchTargetOverhang}">
<ContentControl x:Name="ContentContainer" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" Foreground="{TemplateBinding Foreground}" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a WPF Chart that I am dynamically binding a BarSeries to. I would like to have the BarSeries show 3 pieces of information, however. The third piece of information I would like to be shown in the tooltip of any given datapoint.
Is there any way to dynamically bind the value/content of the tooltip for a given datapoint in my barseries??
XAML:
<UserControl.Resources>
<Style
x:Key="SimpleDataPointStyle"
BasedOn="{StaticResource {x:Type chartingToolkit:BarDataPoint}}"
TargetType="{x:Type chartingToolkit:BarDataPoint}">
<Setter Property="Width" Value="20"/>
<Setter Property="Height" Value="20"/>
<Setter x:Name="DataPointToolTip" Property="ToolTip" Value="{Binding Path=Event_Description}"/>
</Style>
</UserControl.Resources>
<Grid x:Name="MetricsPanel" Width="904" Height="376" HorizontalAlignment="Left" VerticalAlignment="Top">
<chartingToolkit:Chart x:Name="MetricChart" HorizontalAlignment="Left" Width="464" Height="352" VerticalAlignment="Top">
<chartingToolkit:Chart.Series>
<chartingToolkit:BarSeries x:Name="MainSeries"
Title="Contribution to Risk and Errors (%)"
IndependentValueBinding="{Binding}"
DependentValueBinding="{Binding}">
<chartingToolkit:BarSeries.DataPointStyle>
<Style
BasedOn="{StaticResource SimpleDataPointStyle}"
TargetType="{x:Type chartingToolkit:BarDataPoint}">
</Style>
</chartingToolkit:BarSeries.DataPointStyle>
</chartingToolkit:BarSeries>
</chartingToolkit:Chart.Series>
</chartingToolkit:Chart>
Code-Behind
highestWeightedEvents = BuildHighestWeightedEventsTable();
MainSeries.DependentValueBinding = new Binding("Cutset_Frequency");
MainSeries.IndependentValueBinding = new Binding("Event_Number");
MainSeries.ItemsSource = highestWeightedEvents.DefaultView;
Style dataPointStyle = (Style)Resources["SimpleDataPointStyle"];
MainSeries.DataPointStyle = dataPointStyle;
How can I specify the binding for the tooltip in code behind?
Thank in advance...
I actually solved my own problem last night by completely redefining the template for BarDataPoint.
Style XAML:
<Style x:Key="NewDataPointStyle" TargetType="chartingToolkit:BarDataPoint">
<Setter Property="Background" Value="SteelBlue" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="BorderBrush" Value="#FF686868" />
<Setter Property="Width" Value="20" />
<Setter Property="Height" Value="20" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:BarDataPoint">
<Grid x:Name="Root" Opacity="1">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal" />
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.3" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.1" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected" />
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0.185" />
</DoubleAnimationUsingKeyFrames>
<ColorAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)">
<SplineColorKeyFrame KeyTime="00:00:00" Value="#FF8A8A8A" />
</ColorAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Duration="00:00:00.0010000" Storyboard.TargetName="Root" Storyboard.TargetProperty="(UIElement.Opacity)">
<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0" Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ToolTipService.ToolTip>
<ContentControl Content="{Binding Path=Event_Description}" />
</ToolTipService.ToolTip>
<StackPanel Orientation="Horizontal"
Background="{TemplateBinding Background}">
</StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Chart XAML:
<chartingToolkit:Chart x:Name="MetricChart" HorizontalAlignment="Left" Width="464" Height="352" VerticalAlignment="Top">
<chartingToolkit:Chart.Axes>
<chartingToolkit:LinearAxis Interval="10" Maximum="100" x:Name="XAxis" Orientation="X" Title="Percent Contribution (%)"/>
<chartingToolkit:CategoryAxis Title="Event Number" Orientation="Y"/>
</chartingToolkit:Chart.Axes>
<chartingToolkit:Chart.Series>
<chartingToolkit:BarSeries x:Name="MainSeries"
Title="Contribution to Risk and Errors (%)"
IndependentValueBinding="{Binding}"
DependentValueBinding="{Binding}" BorderThickness="0" BorderBrush="Black" Background="Black" OpacityMask="Black">
<chartingToolkit:BarSeries.DataPointStyle>
<Style
BasedOn="{StaticResource NewDataPointStyle}"
TargetType="{x:Type chartingToolkit:BarDataPoint}">
</Style>
</chartingToolkit:BarSeries.DataPointStyle>
</chartingToolkit:BarSeries>
</chartingToolkit:Chart.Series>
<chartingToolkit:Chart.LegendStyle>
<Style TargetType="Control">
<Setter Property="Width" Value="0"/>
<Setter Property="Height" Value="0"/>
</Style>
</chartingToolkit:Chart.LegendStyle>
</chartingToolkit:Chart>
Code-Behind:
//highestWeightedEvents is a DataTable
highestWeightedEvents = BuildHighestWeightedEventsTable();
MainSeries.DependentValueBinding = new Binding("Cutset_Frequency");
MainSeries.IndependentValueBinding = new Binding("Event_Number");
MainSeries.ItemsSource = highestWeightedEvents.DefaultView;
Since I define the DataSeries.ItemsSource in the code-behind, the ToolTip binding knows where to look. I hope somebody else can possibly benefit from this as I spent a whole day figuring this out :D
In code behind you cannot edit a style on the fly cause style get sealed when it's loaded. So you can create a new style from the one you create in the xaml and add your tooltip binding. Something like
//your code behind
Style newDataPointStyle = (Style)Resources["SimpleDataPointStyle"];
newDataPointStyle.Setters.Add(
new Setter
{
Property = "ToolTip",
Value = new Binding("YourBinding")
});
MainSeries.DataPointStyle = newDataPointStyle;