I have a Button control for which I'm defining a custom template. Using some Storyboard's I can successfully manipulate control properties, named transforms and effects with DoubleAnimation's; the problem has arisen, when using a PointAnimation, that an InvalidOperationException is thrown as, per VS: Cannot resolve TargetName OverlayEllipse.
The animation is initiated in code, simply:
private void Button_MouseEnter(object sender, MouseEventArgs e)
{
PopUpStoryboard.Begin();
}
And the relevant XAML:
<Button ...>
<Button.Resources>
<RadialGradientBrush
x:Name="OverlayBrush" ...>
<RadialGradientBrush.GradientStops>
...
</RadialGradientBrush.GradientStops>
</RadialGradientBrush>
<Storyboard x:Name="PopUpStoryboard">
...
<PointAnimation
Storyboard.TargetName="OverlayEllipse"
Storyboard.TargetProperty="(Shape.Fill)(RadialGradientBrush.GradientOrigin)"
Duration="0:0:.1"
To="0.9,1.2"/>
</Storyboard>
<Button.Resources>
<Button.Style>
<Style TargetType="Button">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
...
<Ellipse x:Name="OverlayEllipse" Fill="{StaticResource OverlayBrush}"/>
...
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
The Ellipse can resolve the resource, obviously, as it displays just fine and the exception is thrown directly from the Storyboard.Begin call. How can I correct what I have in order for the Storyboard to be able to resolve to resource by name?
I had thought of using StaticResource binding, however, that won't work considering it refers directly to the object, not its name. I just tried to set the Target, as opposed to TargetName, using the StaticResource binding - this gives me a build error (strangely enough?) stating: The property 'Target' does not exist on the type 'PointAnimation' in the namespace http://schemas.microsoft.com/winfx/2006/xaml/presentation'.
Thanks.
Instead of targeting the resource, still target the property on the control (the Ellipse). Add (Shape.Fill) to target the GradientOrigin.
<PointAnimation
Storyboard.TargetName="OverlayEllipse"
Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)"
Duration="0:0:.1"
To="0.9,1.2"/>
Edit: Here's a complete sample button style.
<Style x:Key="ButtonStyle1" TargetType="Button">
<Setter Property="Background" Value="#FF1F3B53"/>
<Setter Property="Foreground" Value="#FF000000"/>
<Setter Property="Padding" Value="3"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="BorderBrush">
<Setter.Value>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA3AEB9" Offset="0"/>
<GradientStop Color="#FF8399A9" Offset="0.375"/>
<GradientStop Color="#FF718597" Offset="0.375"/>
<GradientStop Color="#FF617584" Offset="1"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Grid>
<Grid.Resources>
<RadialGradientBrush x:Key="Brush1" GradientOrigin="0.5,0.5">
<GradientStop Color="White" Offset="0"/>
<GradientStop Color="#F9FFFFFF" Offset="0.375"/>
<GradientStop Color="#E5FFFFFF" Offset="0.625"/>
<GradientStop Color="#C6FFFFFF" Offset="1"/>
</RadialGradientBrush>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
<PointAnimation Duration="0" To="0,0.5" Storyboard.TargetProperty="(Shape.Fill).(RadialGradientBrush.GradientOrigin)" Storyboard.TargetName="BackgroundGradient" d:IsOptimized="True"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="BackgroundAnimation"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To=".55" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="DisabledVisualElement"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisualElement"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Unfocused"/>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Background" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="3">
<Grid Background="{TemplateBinding Background}" Margin="1">
<Border x:Name="BackgroundAnimation" Background="#FF448DCA" Opacity="0"/>
<Rectangle x:Name="BackgroundGradient" Fill="{StaticResource Brush1}">
</Rectangle>
</Grid>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Rectangle x:Name="DisabledVisualElement" Fill="#FFFFFFFF" IsHitTestVisible="false" Opacity="0" RadiusY="3" RadiusX="3"/>
<Rectangle x:Name="FocusVisualElement" IsHitTestVisible="false" Margin="1" Opacity="0" RadiusY="2" RadiusX="2" Stroke="#FF6DBDD1" StrokeThickness="1"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Related
I'd like to have the DatePicker prompt the user with a different message than "Select a date" for my DatePicker. Preferably I'd have a resx entry that would determine the value displayed, so is there a property of the DatePicker I can set to display a different opening message? I can deal with the resx portion of the problem myself, I just need help figuring out what property to set.
I've tried using datepicker.Text = "Enter a date", just as a test, but it does not display the string.
Here is the xaml markup for the DatePicker:
<DatePicker Height="28" HorizontalAlignment="Left" Margin="515,55.661,0,0" Name="dtpStartDate" VerticalAlignment="Top" Width="180" FontSize="16" Background="White" SelectedDateFormat="Short" TabIndex="20"/>
You could define an implicit DatePickerTextBox style where you hide the ContentControl named "PART_Watermark" and add a TextBlock with your custom text:
<DatePicker Height="28" HorizontalAlignment="Left" Margin="515,55.661,0,0" Name="dtpStartDate"
VerticalAlignment="Top" Width="180" FontSize="16" Background="White"
SelectedDateFormat="Short" TabIndex="20">
<DatePicker.Resources>
<Style TargetType="DatePickerTextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type DatePickerTextBox}">
<Grid>
<Grid.Resources>
<SolidColorBrush x:Key="WatermarkBrush" Color="#FFAAAAAA"/>
</Grid.Resources>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
<VisualTransition GeneratedDuration="0:0:0.1" To="MouseOver"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="ContentElement"/>
<ColorAnimation Duration="0" To="#FF99C1E2" Storyboard.TargetProperty="(Border.BorderBrush).(SolidColorBrush.Color)" Storyboard.TargetName="watermark_decorator"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="WatermarkStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unwatermarked"/>
<VisualState x:Name="Watermarked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentElement"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="PART_Watermark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="FocusStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unfocused"/>
<VisualState x:Name="Focused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="FocusVisual"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="Border" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="1" Opacity="1" Padding="{TemplateBinding Padding}">
<Grid x:Name="WatermarkContent" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}">
<Border x:Name="ContentElement" BorderBrush="#FFFFFFFF" BorderThickness="1"/>
<Border x:Name="watermark_decorator" BorderBrush="#FFFFFFFF" BorderThickness="1">
<Grid>
<ContentControl x:Name="PART_Watermark" Focusable="False" IsHitTestVisible="False" Opacity="0" Padding="2" Visibility="Collapsed"/>
<TextBlock Text="custom..." />
</Grid>
</Border>
<ScrollViewer x:Name="PART_ContentHost" HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="0" VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Border x:Name="FocusVisual" BorderBrush="#FF45D6FA" CornerRadius="1" IsHitTestVisible="False" Opacity="0"/>
</Grid>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</DatePicker.Resources>
</DatePicker>
To display the value of a resource that is defined in a .resx file, you can set the Text property of the TextBlock using the x:Static markup extension like this where "AppResources" is the name of the .resx file and "HelloWorld" is the name of the string resource in the file:
<TextBlock Text="{x:Static local:AppResources.HelloWorld}" />
The only problem is when I choose a date, the watermark stays and is overlaid by the date. Is there any way to fix this?
Good point. You could apply a Style to the TextBlock and use a DataTrigger to bind to the SelectedDate property of the DatePicker:
<TextBlock Text="{x:Static local:AppResources.HelloWorld}">
<TextBlock.Style>
<Style TargetType="TextBlock">
<Setter Property="Visibility" Value="Collapsed" />
<Style.Triggers>
<DataTrigger Binding="{Binding SelectedDate, RelativeSource={RelativeSource AncestorType=DatePicker}}"
Value="{x:Null}">
<Setter Property="Visibility" Value="Visible" />
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
I have an existing Pivot header template I am using, but it is not giving me the effect I need. I need the currently selected PivotItem to have a blue foreground and white background, while all other pivot items have a standard disabled foreground and background look. Currently below I have what I believe is everything except the blue foreground on the selected PivotItem, but I cannot figure out how to apply a foreground correctly to only the selected item?
<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="21,0,1,0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Primitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource PhoneDisabledColor}"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="{StaticResource PhoneBackgroundColor}"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="myback" Background="{TemplateBinding Background}">
<ContentControl x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="PivotStyle1" TargetType="phone:Pivot">
<Setter Property="Margin" Value="0"/>
<Setter Property="Padding" Value="0"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<Grid/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="phone:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}" VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="{TemplateBinding Background}" Grid.RowSpan="3"/>
<ContentControl x:Name="TitleElement" ContentTemplate="{TemplateBinding TitleTemplate}" Content="{TemplateBinding Title}" HorizontalAlignment="Left" Margin="24,0,0,-7" Style="{StaticResource PivotTitleStyle}"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement" Grid.Row="1" ItemContainerStyle="{StaticResource PivotHeaderItemStyle1}" FontSize="70"/>
<ItemsPresenter x:Name="PivotItemPresenter" Margin="{TemplateBinding Padding}" Grid.Row="2"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Change the <ContentPresenter> to a <TextBlock>
Like so
<Style x:Key="PivotHeaderItemStyle1" TargetType="Primitives:PivotHeaderItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Padding" Value="10,0,10,0"/>
<Setter Property="Margin" Value="0"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Primitives:PivotHeaderItem">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected">
<Storyboard>
<ColorAnimation Duration="0" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
<ColorAnimation Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Green"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<ColorAnimation Duration="0:0:1" Storyboard.TargetName="border_highlight" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="PaleGreen"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="contentPresenter"/>
<ColorAnimation Duration="0" Storyboard.TargetName="contentPresenter" Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)" To="Blue"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Border x:Name="border_highlight" Background="{TemplateBinding Background}" >
<!--<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"/>-->
<TextBlock x:Name="contentPresenter" Foreground="{TemplateBinding Foreground}" Text="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" Opacity="{StaticResource PhonePivotUnselectedItemOpacity}"></TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then you can animate the Foreground. Here's a screenshot of the above code. With Selected Color = Blue and Unselected Color = Green. You will need to add back in your background animation though.
#Teysz, I think that with Windows 10 UWP you better start from the default style for PivotItemHeader and make a copy of that in the ..Resources section of your XAML file. The default style cannot be inserted by Visual Studio 2015 so you have to get it yourself from:
%ProgramFiles(x86)%\Windows Kits\10\DesignTime\CommonConfiguration\Neutral\UAP\10.0.10240.0\Generic\generic.xaml
I found this at http://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/
I am using the Silverlight charting control: System.Windows.Controls.DataVisualization.Charting and I wish to remove the gradient that is on the bar where the color is solid at the bottom and gets lighter towards the top, so what I am looking for is a solid bar and not with a gradient.
I have managed to get the original style from Blend for the chart control and added the following to my own style:
<Setter Property="PlotAreaStyle">
<Setter.Value>
<Style TargetType="Grid">
<Setter Property="HorizontalAlignment" Value="Left"></Setter>
<Setter Property="Background" >
<Setter.Value>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Transparent"/>
<GradientStop Color="Black" Offset="0"/>
</LinearGradientBrush>
</Setter.Value>
</Setter>
</Style>
</Setter.Value>
</Setter>
Can someone please help me as I am new to Silverlight and have spent many hours trying to find a solution, I am using this site as a last resort.
This is the code I am using for the chart control.
<charting:Chart Loaded="Loaded" Width="{Binding ElementName=Graph, Path=GraphWidth}" Grid.Column="0" BorderBrush="Transparent" x:Name="SummaryGraph"
Style="{StaticResource SummaryGraphStyle}"
VerticalAlignment="Stretch" HorizontalAlignment="Center">
<charting:ColumnSeries>
<charting:ColumnSeries.DataPointStyle>
<Style TargetType="charting:ColumnDataPoint">
<Setter Property="Background" Value="Black" />
</Style>
</charting:ColumnSeries.DataPointStyle>
</charting:ColumnSeries>
<charting:Chart.Axes>
<DataVisualization:LinearAxisWithAxisLine AxisLabelStyle="{StaticResource YAxisLabel}" FontStyle="Normal" FontWeight="Bold" Title="{Binding ElementName=Graph, Path=YAxisTitle}" Orientation="Y" />
<charting:CategoryAxis AxisLabelStyle="{StaticResource XAxisLabel}" FontSize="{Binding ElementName=Graph, Path=XAxisLabelFontSize}" BorderThickness="0" Background="Transparent" Orientation="X" />
</charting:Chart.Axes>
</charting:Chart>
Many Thanks,
I am now using this code with the style provided:
<charting:Chart Loaded="Loaded" Width="{Binding ElementName=Graph, Path=GraphWidth}" Grid.Column="0" BorderBrush="Transparent" x:Name="SummaryGraph"
Style="{StaticResource SummaryGraphStyle}"
VerticalAlignment="Stretch" HorizontalAlignment="Center">
<!--<charting:ColumnSeries DataPointStyle="{StaticResource ColumnDataPointNoGradientStyle}" />
<charting:ColumnSeries>
<charting:ColumnDataPoint Style="{StaticResource ColumnDataPointNoGradientStyle}"></charting:ColumnDataPoint>
</charting:ColumnSeries>-->
<charting:StackedColumnSeries>
<charting:SeriesDefinition DataPointStyle="{StaticResource ColumnDataPointNoGradientStyle}"/>
</charting:StackedColumnSeries>
<charting:Chart.Axes>
<DataVisualization:LinearAxisWithAxisLine AxisLabelStyle="{StaticResource YAxisLabel}" FontStyle="Normal" FontWeight="Bold" Title="{Binding ElementName=Graph, Path=YAxisTitle}" Orientation="Y" />
<charting:CategoryAxis AxisLabelStyle="{StaticResource XAxisLabel}" FontSize="{Binding ElementName=Graph, Path=XAxisLabelFontSize}" BorderThickness="0" Background="Transparent" Orientation="X" >
</charting:CategoryAxis>
</charting:Chart.Axes>
</charting:Chart>
You need to modify the DataPointStyle Background on the ColumnSeries. Try setting the style directly into the StackedColumnSeries
xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/toolkit"
<toolkit:Chart>
<toolkit:ColumnSeries Title="{Binding ...}" ItemsSource="{Binding ...}" IndependentValuePath="..." DependentValuePath="...">
<toolkit:ColumnSeries.DataPointStyle>
<Style x:Key="ColumnDataPointNoGradientStyle" TargetType="toolkit:ColumnDataPoint">
<Setter Property="Background" Value="Orange"/>
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ColumnDataPoint">
<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Opacity="0">
<ToolTipService.ToolTip>
<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
</ToolTipService.ToolTip>
<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>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="MouseOverHighlight"/>
</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>
<DoubleAnimation Duration="0" To="0.6" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectionHighlight"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Background="{TemplateBinding Background}">
<Rectangle Visibility="Collapsed">
<Rectangle.Fill>
<LinearGradientBrush>
<GradientStop Color="#77ffffff" Offset="0"/>
<GradientStop Color="#00ffffff" Offset="1"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<Border BorderBrush="#ccffffff" BorderThickness="1" Visibility="Collapsed">
<Border BorderBrush="#77ffffff" BorderThickness="1"/>
</Border>
<Rectangle x:Name="SelectionHighlight" Fill="Red" Opacity="0"/>
<Rectangle x:Name="MouseOverHighlight" Fill="White" Opacity="0"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</toolkit:ColumnSeries.DataPointStyle>
</toolkit:ColumnSeries>
<toolkit:Chart>
Here is the full DataPointStyle. The only modification is adding a visibility collapsed to the gradient rectangle: <Rectangle Visibility="Collapsed"> (located near the bottom)
I got an issue that my ToggleSwitch is white like this picture below shows:
I want to style the white part to be black. How do I do that?
I've changed the default style but no option seems to change it?
Here is my style for it:
<Style x:Key="ToggleSwitchStyle" TargetType="toolkit:ToggleSwitch">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="FontFamily" Value="{StaticResource PhoneFontFamilyLight}"/>
<Setter Property="FontSize" Value="{StaticResource PhoneFontSizeLarge}"/>
<Setter Property="Foreground" Value="{StaticResource PhoneForegroundBrush}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:ToggleSwitch">
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CacheMode="BitmapCache" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Header"/>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Content"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid Margin="12,5,12,42">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentControl x:Name="Header" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Foreground="#467CCD" FontSize="{StaticResource PhoneFontSizeNormal}" FontFamily="{StaticResource PhoneFontFamilyNormal}" HorizontalAlignment="Left" IsTabStop="False" Margin="-1,0,0,0" Opacity="{TemplateBinding Opacity}" VerticalAlignment="Bottom"/>
<ContentControl x:Name="Content" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" IsTabStop="False" Margin="-1,1,0,-7" Opacity="{TemplateBinding Opacity}" Grid.Row="1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<toolkitPrimitives:ToggleSwitchButton x:Name="Switch" Background="#467CCD" Grid.Column="1" Margin="-22,-29,-24,-28" Opacity="{TemplateBinding Opacity}" Grid.RowSpan="2" SwitchForeground="Black" VerticalAlignment="Bottom"/>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You need to define the following Style
<Style x:Key="ToggleSwitchButtonStyle1" TargetType="toolkitPrimitives:ToggleSwitchButton">
<Setter Property="Background" Value="{StaticResource PhoneBackgroundBrush}"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="SwitchForeground" Value="{StaticResource PhoneAccentBrush}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkitPrimitives:ToggleSwitchButton">
<Border x:Name="Root" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CacheMode="BitmapCache" Opacity="{TemplateBinding Opacity}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Disabled">
<Storyboard>
<ColorAnimation Duration="0" To="{StaticResource PhoneForegroundColor}" Storyboard.TargetProperty="(Grid.Background).(SolidColorBrush.Color)" Storyboard.TargetName="SwitchBottom"/>
<ColorAnimation Duration="0" To="{StaticResource PhoneForegroundColor}" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" Storyboard.TargetName="ThumbCenter"/>
<DoubleAnimation Duration="0" To="0.3" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Root"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CheckStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.05" To="Unchecked"/>
<VisualTransition GeneratedDuration="0:0:0.05" To="Checked"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Checked">
<Storyboard>
<DoubleAnimation Duration="0" To="69" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="BackgroundTranslation">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="15"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
<DoubleAnimation Duration="0" To="69" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="ThumbTranslation">
<DoubleAnimation.EasingFunction>
<ExponentialEase EasingMode="EaseOut" Exponent="15"/>
</DoubleAnimation.EasingFunction>
</DoubleAnimation>
</Storyboard>
</VisualState>
<VisualState x:Name="Dragging"/>
<VisualState x:Name="Unchecked">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="BackgroundTranslation"/>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(TranslateTransform.X)" Storyboard.TargetName="ThumbTranslation"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="SwitchRoot" Background="Transparent" Height="95" Width="136">
<Grid x:Name="SwitchTrack" Width="89">
<Grid x:Name="SwitchBottom" Background="{TemplateBinding SwitchForeground}" Height="34">
<Rectangle x:Name="SwitchBackground" Fill="{TemplateBinding Background}" HorizontalAlignment="Center" Height="20" VerticalAlignment="Center" Width="77">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="BackgroundTranslation"/>
</Rectangle.RenderTransform>
</Rectangle>
<Border BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="3">
<Border BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="4"/>
</Border>
</Grid>
<Border x:Name="SwitchThumb" BorderBrush="{StaticResource PhoneBackgroundBrush}" BorderThickness="4,0" HorizontalAlignment="Left" Height="38" Margin="-4,0" Width="28">
<Border.RenderTransform>
<TranslateTransform x:Name="ThumbTranslation"/>
</Border.RenderTransform>
<Border x:Name="ThumbCenter" BorderBrush="{StaticResource PhoneForegroundBrush}" BorderThickness="2" Background="Black"/>
</Border>
</Grid>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And link it to the ToggleSwitch primitive in the style you attached in your post:
....
<toolkitPrimitives:ToggleSwitchButton x:Name="Switch" Background="#467CCD" Grid.Column="1" Margin="-22,-29,-24,-28" Opacity="{TemplateBinding Opacity}" Grid.RowSpan="2" SwitchForeground="Black" VerticalAlignment="Bottom" Style="{StaticResource ToggleSwitchButtonStyle1}"/>
....
I edited the ThumbCenter Background property. You can play with other colors if you wish!
I'm porting an app from Windows Phone 7 to Windows Phone 8 and am having some problems with the PathListBox control.
Here's the XAML:
<Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
<Path x:Name="path" Data="M58,382 C59,378 67,156 162,216 C257,276 268,381 325,268 C382,155 470,188 345,107.999 C220,27.9988 191,-10.0014 51,46.9988 C-89,103.999 -106,203.999 18,185.999 C142,167.999 108,105.999 179,130.999" HorizontalAlignment="Left" Height="363.298" Margin="4.98,54.202,0,0" Stretch="Fill" Stroke="Red" UseLayoutRounding="False" VerticalAlignment="Top" Width="475.02" StrokeThickness="3"/>
<mec:PathListBox HorizontalAlignment="Left" Height="100" VerticalAlignment="Top" Width="100">
<mec:PathListBox.LayoutPaths>
<mec:LayoutPath SourceElement="{Binding ElementName=path}"/>
</mec:PathListBox.LayoutPaths>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
<mec:PathListBoxItem Content="PathListBoxItem" HorizontalAlignment="Left" Height="24" VerticalAlignment="Top" Width="100"/>
</mec:PathListBox>
</Grid>
The PathListBoxItems are not following the path like they do in WPF, Silverlight, and Windows Phone 7. What gives?
No compilation errors or warning, visual studio 2012 gives me no warnings. In the LayoutPaths list in the properties panel in Blend 5, There is a little yellow warning symbol on the "path" item next to the remove "-" button. The tooltip upon hovering the icon with the mouse states :
This object does not exist or is a descendant of this PathListBox.
This does not appear to be true given the XAML I've provided.
I've tried this with a rectangle, ellipse, and strait line. I've changed the order in which they were declared. It doesn't matter, Blend 5 always gives me the same little warning. Any one else experiencing this with Windows Phone 8 PathListBox?
I've sussed most it. The wp8 variant is missing the control templates. I copied the itemcontainer style from wp7 into the local resources of wp8 app and it seems to be working now;
<phone:PhoneApplicationPage.Resources>
<Style x:Key="PathListBoxStyle1" TargetType="mec:PathListBox">
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="UseLayoutRounding" Value="False"/>
<Setter Property="ItemsPanel">
<Setter.Value>
<ItemsPanelTemplate>
<mec:PathPanel/>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="mec:PathListBox">
<Grid>
<!--
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="ValidationStates">
<VisualState x:Name="Valid"/>
<VisualState x:Name="InvalidUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="InvalidFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="ValidationErrorElement">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsOpen" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>True</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
-->
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" CornerRadius="2" Padding="{TemplateBinding Padding}">
<ItemsPresenter/>
</Border>
<!--
<Border x:Name="ValidationErrorElement" BorderBrush="#FFDB000C" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="2" Visibility="Collapsed">
<ToolTipService.ToolTip>
<ToolTip x:Name="validationTooltip" DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}" Placement="Right" PlacementTarget="{Binding RelativeSource={RelativeSource TemplatedParent}}" Template="{StaticResource ValidationToolTipTemplate}">
<ToolTip.Triggers>
<EventTrigger RoutedEvent="Canvas.Loaded">
<BeginStoryboard>
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="validationTooltip">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<System:Boolean>true</System:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ToolTip.Triggers>
</ToolTip>
</ToolTipService.ToolTip>
<Grid Background="Transparent" HorizontalAlignment="Right" Height="10" Margin="0,-4,-4,0" VerticalAlignment="Top" Width="10">
<Path Data="M 1,0 L6,0 A 2,2 90 0 1 8,2 L8,7 z" Fill="#FFDC000C" Margin="-1,3,0,0"/>
<Path Data="M 0,0 L2,0 L 8,6 L8,8" Fill="#ffffff" Margin="-1,3,0,0"/>
</Grid>
</Border>
-->
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="DataTemplate1">
<Grid>
<TextBlock Text="{Binding Name}" />
<TextBlock Text="{Binding ElementName, RelativeSource={RelativeSource Mode=TemplatedParent}}" />
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<mec:PathPanel/>
</ItemsPanelTemplate>
<mec:IsArrangedToScaleConverter x:Key="IsArrangedToScaleConverter"/>
<Style x:Key="PathListBoxItemStyle1" TargetType="mec:PathListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="mec:PathListBoxItem">
<Grid Background="{TemplateBinding Background}" RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="{Binding IsArranged, Converter={StaticResource IsArrangedToScaleConverter}, RelativeSource={RelativeSource TemplatedParent}}" ScaleX="{Binding IsArranged, Converter={StaticResource IsArrangedToScaleConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<SkewTransform/>
<RotateTransform Angle="{Binding OrientationAngle, RelativeSource={RelativeSource TemplatedParent}}"/>
<TranslateTransform/>
</TransformGroup>
</Grid.RenderTransform>
<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=".75" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="fillColor2"/>
</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="#FFBADDE9" IsHitTestVisible="False" Opacity="0" RadiusY="1" RadiusX="1"/>
<Rectangle x:Name="fillColor2" Fill="#FFBADDE9" 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="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</phone:PhoneApplicationPage.Resources>
to use it;
<mec:PathListBox x:Name="MyPathListBox" HorizontalAlignment="Left"
Height="100"
VerticalAlignment="Top"
Width="100"
Style="{StaticResource PathListBoxStyle1}"
ItemContainerStyle="{StaticResource PathListBoxItemStyle1}"
ItemsSource="{Binding Items}"
>
<mec:PathListBox.ItemTemplate>
<DataTemplate>
<Grid>
<TextBlock>bla</TextBlock>
</Grid>
</DataTemplate>
</mec:PathListBox.ItemTemplate>
<mec:PathListBox.LayoutPaths>
<mec:LayoutPath Orientation="OrientToPath" SourceElement="{Binding ElementName=path}" />
</mec:PathListBox.LayoutPaths>
</mec:PathListBox>
It seems to work better if you use code rather than xaml, but even then it still ignores some of the settings;
private PathListBox AttachPathListBoxToShape(ViewModel viewModel, IEnumerable itemSource, Shape shape, string dataTemplateKey, string itemsPanelTemplateKey)
{
DataTemplate dataTemplate = (DataTemplate)Application.Current.Resources[dataTemplateKey];
ItemsPanelTemplate itemsPanelTemplate = (ItemsPanelTemplate)Application.Current.Resources[itemsPanelTemplateKey];
PathListBox dynoListBox = new PathListBox();
dynoListBox.ItemsSource = itemSource;
dynoListBox.ItemTemplate = dataTemplate;
dynoListBox.ItemsPanel = itemsPanelTemplate;
LayoutPath dynoPath = new LayoutPath();
dynoPath.SourceElement = shape;
dynoPath.Distribution = Distribution.Even;
dynoPath.Orientation = Microsoft.Expression.Controls.Orientation.OrientToPath;
dynoListBox.LayoutPaths.Add(dynoPath);
return dynoListBox;
}