We need to create a chart for service types.
The types can be added dynamically and I don't have a proper color definition for each of them.
So we are using the Telerik Silverlight RadChart and everything was fine until the client came with a trick requirement. We shouldn't show two colors in the grid: Red and Green.
There is some way to avoid all red and green palette of colors and still be able to render the chart with random colors?
A solution for Toolkit charts is to generate colors in C# code and completely rewrite the pie data point template.
By the way I have found an article explaining the same approach for Telerik charts:
Binding the Color of Series Items
So if you want to eliminate 2 colors, just set some other colors to the ChartItemModel.Color property. C# code will be something like this:
public class ChartItemModel
{
public string Title { get; set; }
public double Value { get; set; }
public Brush Color { get; set; }
}
var chartItems = new []
{
new ChartItem { Title = "Item1", Value = 25, Color = (Brush)Resources["BlueBrush"] },
new ChartItem { Title = "Item2", Value = 75, Color = (Brush)Resources["YellowBrush"] }
// other items, the Color property of which doesn't have a red or green brush
};
// binding
And PieDataPoint template is copied from the built-in one and changed by adding the binding to the brush (Fill="{Binding Color}"):
<charting:PieSeries.DataPointStyle>
<Style TargetType="charting:PieDataPoint">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="charting:PieDataPoint">
<Grid x:Name="Root" Opacity="0">
<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 Storyboard.TargetName="MouseOverHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
</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 Storyboard.TargetName="SelectionHighlight" Storyboard.TargetProperty="Opacity" To="0.6" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="RevealStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.5" />
</VisualStateGroup.Transitions>
<VisualState x:Name="Shown">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="1" Duration="0" />
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Root" Storyboard.TargetProperty="Opacity" To="0" Duration="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Slice" Data="{TemplateBinding Geometry}" Fill="{Binding Color}" Stroke="{TemplateBinding BorderBrush}" StrokeMiterLimit="1">
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content="{TemplateBinding FormattedDependentValue}" />
<ContentControl Content="{TemplateBinding FormattedRatio}" />
</StackPanel>
</ToolTipService.ToolTip>
</Path>
<Path x:Name="SelectionHighlight" Data="{TemplateBinding GeometrySelection}" Fill="Red" StrokeMiterLimit="1" IsHitTestVisible="False" Opacity="0" />
<Path x:Name="MouseOverHighlight" Data="{TemplateBinding GeometryHighlight}" Fill="White" StrokeMiterLimit="1" IsHitTestVisible="False" Opacity="0" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</charting:PieSeries.DataPointStyle>
Related
For a production application we want to display a DatePicker inside an ElementHost in a Windows Forms application, but we get the issue that the SelectedDate and CurrentDate are not readable, because the numbers won't be shown.
We can't find the issue inside the xaml style of MaterialDesignInXamlToolkit, because we aren't experienced enough.
It got already an issue on the github project page but nobody seems to answer or have a look at it.
There is also a github repo with the reproduced bug.
The behavior you're looking for can be achieved by proper Style/Template customization. The crux of the case is to simply eliminate an ObjectAnimationUsingKeyFrames present in the ControlTemplate of CalendarDayButton. Also, in order to apply such customization, one needs to consider the HAS A relationship between CalendarDayButton, Calendar and DatePicker. This is a textbook case where BasedOn comes-in very handy.
Here's the XAML that does the trick:
<Style x:Key="MyCalendarDayButton"
TargetType="CalendarDayButton"
BasedOn="{StaticResource MaterialDesignCalendarDayButton}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type CalendarDayButton}">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="{x:Null}" GeneratedDuration="0:0:0.1" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightBackground"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualStateGroup.Transitions>
<VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="0.5" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBackground"/>
<!--
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="NormalText">
<DiscreteObjectKeyFrame KeyTime="0" Value="{DynamicResource PrimaryHueMidForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
-->
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="CalendarButtonFocusStates">
<VisualStateGroup.Transitions>
<VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="CalendarButtonFocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DayButtonFocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Visible</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="CalendarButtonUnfocused">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="DayButtonFocusVisual">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<Visibility>Collapsed</Visibility>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ActiveStates">
<VisualStateGroup.Transitions>
<VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="Active"/>
<VisualState x:Name="Inactive"/>
</VisualStateGroup>
<VisualStateGroup x:Name="DayStates">
<VisualStateGroup.Transitions>
<VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="RegularDay"/>
<VisualState x:Name="Today">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="TodayBackground"/>
<!--
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground)" Storyboard.TargetName="NormalText">
<DiscreteObjectKeyFrame KeyTime="0" Value="{DynamicResource PrimaryHueLightForegroundBrush}"/>
</ObjectAnimationUsingKeyFrames>
-->
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="BlackoutDayStates">
<VisualStateGroup.Transitions>
<VisualTransition From="{x:Null}" GeneratedDuration="0" GeneratedEasingFunction="{x:Null}" Storyboard="{x:Null}" To="{x:Null}"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="NormalDay"/>
<VisualState x:Name="BlackoutDay">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="HighlightingBorder"/>
<DoubleAnimation Duration="0" To="0.38" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="NormalText"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Ellipse x:Name="TodayBackground" Fill="{DynamicResource PrimaryHueLightBrush}" Opacity="0"/>
<Ellipse x:Name="SelectedBackground" Fill="{DynamicResource PrimaryHueMidBrush}" Opacity="0"/>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
<Border x:Name="HighlightingBorder" Opacity="1">
<Ellipse x:Name="HighlightBackground" Fill="{DynamicResource PrimaryHueDarkBrush}" Opacity="0"/>
</Border>
<ContentPresenter x:Name="NormalText" ContentTemplate="{TemplateBinding ContentTemplate}" Content="{TemplateBinding Content}" ContentStringFormat="{TemplateBinding ContentStringFormat}" TextElement.Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="5,1" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<Ellipse x:Name="DayButtonFocusVisual" Opacity="0" Stroke="{DynamicResource PrimaryHueDarkBrush}" StrokeThickness="1" Visibility="Collapsed"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Style x:Key="MyCalendarStyle"
TargetType="Calendar"
BasedOn="{StaticResource MaterialDesignDatePickerCalendarPortrait}">
<Setter Property="CalendarDayButtonStyle" Value="{StaticResource MyCalendarDayButton}"/>
</Style>
<Style x:Key="MyDatePickerStyle"
TargetType="DatePicker"
BasedOn="{StaticResource MaterialDesignDatePicker}">
<Setter Property="CalendarStyle" Value="{StaticResource MyCalendarStyle}"/>
</Style>
And here's a side-by-side comparison between the resulting custom style as shown above and the original, standard MaterialDesign style:
Full source code solution for this sample project can be found on GitHub.
I populated a gridview with data from a list based on
public class Players
{
public int id { get; set; }
public string level { get; set; }
public string image { get; set; }
public List<string> name { get; set; }
}
Using
players = await Operations.GetPlayersAsync(Currentlevel);
ViewPlayers.ItemsSource = players;
Xaml of GridView
<DataTemplate x:Key="ImageGalleryDataTemplate">
<Border Background="#FF939598">
<Image Margin="20,20,20,20" Source="{Binding image}" Height="250" Width="150" Stretch="Fill"/>
</Border>
</DataTemplate>
<GridView x:Name="ViewPlayers" IsItemClickEnabled="True"
ItemTemplate="{StaticResource ImageGalleryDataTemplate}" SelectionMode="None" ItemClick="PlayerClick">
</GridView>
The Grid View loads data properly, and all item are displayed, and I can click them, and do necessary task.
I have a Sqllite database in which it stores data of format
public class userData
{[PrimaryKey, AutoIncrement]
public int id { get; set; }
public bool answered { get; set; }
[Unique] public string pid { get; set; }
public string answer { get; set; }
}
What I try to achieve is that to disable the IsItemClickEnabled Property of the Players (which is populated using GetPlayersAsync function) which is marked as answered (bool value true). I am able to get data from Sqllite data, compare and get which all items to be disabled (Player id).
But I am not able to disable the particular players IsItemClickEnabled property.
I searched MSDN, Stackoverflow with possible keywords I can, but couldn't find a solution to dynamically control selected items in ItemsSource of GridView or ItemView.
You should check if item is answered in method PlayerClick.
private void ListViewBase_OnItemClick(object sender, ItemClickEventArgs e)
{
var item = e.ClickedItem as userData;
if(item.answered) return;
//continue process
}
To disable visual effect for answered item
You could use ItemContainerStyleSelector
public class COntainerSelector : StyleSelector
{
public Style Answered { get; set; }
public Style Default { get; set; }
protected override Style SelectStyleCore(object item, DependencyObject container)
{
var data = item as userData;
//If data is null or it un answered we use default container (have tilt effect)
if (data==null || !data.answered) return Default;
return Answered;
return base.SelectStyleCore(item, container);
}
}
Item container for un answered item (with tilt effect)
<Style x:Key="ContainerWithTiltEffect" TargetType="GridViewItem">
<Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}"/>
<Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="False"/>
<Setter Property="Margin" Value="{ThemeResource GridViewItemMargin}"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="GridViewItem">
<Border x:Name="OuterContainer" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<ScaleTransform x:Name="ContentScaleTransform"/>
</Border.RenderTransform>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="TiltContainer"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="TiltContainer"/>
</Storyboard>
</VisualState>
<VisualState x:Name="CheckboxPressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="CheckboxTiltContainer"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Disabled">
<Storyboard>
<DoubleAnimation Duration="0" To="{ThemeResource ListViewItemDisabledThemeOpacity}" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="contentPresenter"/>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Stroke" Storyboard.TargetName="NormalRectangle">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="CheckGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource CheckBoxDisabledForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="SelectedBorder">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedEarmark">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Fill" Storyboard.TargetName="SelectedGlyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="Transparent"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="SelectionStates">
<VisualState x:Name="Unselected"/>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
<VisualState x:Name="SelectedUnfocused">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="CheckGlyph"/>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedCheckMark"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="DataVirtualizationStates">
<VisualState x:Name="DataAvailable"/>
<VisualState x:Name="DataPlaceholder">
<Storyboard>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderTextBlock">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="PlaceholderRect">
<DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="MultiSelectStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ListMultiSelect" GeneratedDuration="0:0:0.15" To="NoMultiSelect"/>
<VisualTransition From="NoMultiSelect" GeneratedDuration="0:0:0.15" To="ListMultiSelect"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoMultiSelect"/>
<VisualState x:Name="ListMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="X" Storyboard.TargetName="CheckboxContainerTranslateTransform"/>
<DoubleAnimation Duration="0" To="{ThemeResource ListViewItemContentTranslateX}" Storyboard.TargetProperty="X" Storyboard.TargetName="ContentBorderTranslateTransform"/>
</Storyboard>
</VisualState>
<VisualState x:Name="GridMultiSelect">
<Storyboard>
<DoubleAnimation Duration="0" To="1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="SelectedBorder"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderModeStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ReorderEnabled" GeneratedDuration="00:00:00.2" To="ReorderDisabled"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="ReorderEnabled">
<Storyboard>
<DropTargetItemThemeAnimation Storyboard.TargetName="OuterContainer"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Reorderable">
<Storyboard>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleX" Storyboard.TargetName="ContentScaleTransform">
<LinearDoubleKeyFrame KeyTime="00:00:00.075" Value="1.05"/>
<LinearDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0"/>
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="ScaleY" Storyboard.TargetName="ContentScaleTransform">
<LinearDoubleKeyFrame KeyTime="00:00:00.075" Value="1.05"/>
<LinearDoubleKeyFrame KeyTime="00:00:00.2" Value="1.0"/>
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="ReorderDisabled"/>
</VisualStateGroup>
<VisualStateGroup x:Name="ReorderHintStates">
<VisualStateGroup.Transitions>
<VisualTransition GeneratedDuration="0:0:0.2" To="NoReorderHint"/>
</VisualStateGroup.Transitions>
<VisualState x:Name="NoReorderHint"/>
<VisualState x:Name="BottomReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Bottom" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Storyboard.TargetName="ReorderHintContent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="RightReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Right" ToOffset="{ThemeResource ListViewItemReorderHintThemeOffset}" Storyboard.TargetName="ReorderHintContent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="TopReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Top" ToOffset="0" Storyboard.TargetName="ReorderHintContent"/>
</Storyboard>
</VisualState>
<VisualState x:Name="LeftReorderHint">
<Storyboard>
<DragOverThemeAnimation Direction="Left" ToOffset="0" Storyboard.TargetName="ReorderHintContent"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="ReorderHintContent" Background="Transparent">
<Border x:Name="CheckboxTiltContainer" HorizontalAlignment="Left" Margin="{ThemeResource ListViewItemMultiselectCheckBoxMargin}" VerticalAlignment="Top">
<Border x:Name="CheckboxOuterContainer">
<Border.Clip>
<RectangleGeometry Rect="0,0,25.5,25.5"/>
</Border.Clip>
<Grid x:Name="CheckboxContainer">
<Grid.RenderTransform>
<TranslateTransform x:Name="CheckboxContainerTranslateTransform" X="{ThemeResource ListViewItemContentOffsetX}"/>
</Grid.RenderTransform>
<Rectangle x:Name="NormalRectangle" Fill="{ThemeResource CheckBoxBackgroundThemeBrush}" Height="25.5" Stroke="{ThemeResource CheckBoxBorderThemeBrush}" StrokeThickness="{ThemeResource CheckBoxBorderThemeThickness}" Width="25.5"/>
<Path x:Name="CheckGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource CheckBoxForegroundThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Center" Height="17" IsHitTestVisible="False" Opacity="0" Stretch="Fill" StrokeThickness="2.5" StrokeLineJoin="Round" VerticalAlignment="Center" Width="18.5"/>
</Grid>
</Border>
</Border>
<Border x:Name="ContentContainer">
<Border x:Name="TiltContainer">
<Border x:Name="ContentBorder" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
<Border.RenderTransform>
<TranslateTransform x:Name="ContentBorderTranslateTransform"/>
</Border.RenderTransform>
<Grid>
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" Content="{TemplateBinding Content}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
<TextBlock x:Name="PlaceholderTextBlock" AutomationProperties.AccessibilityView="Raw" Foreground="{x:Null}" IsHitTestVisible="False" Margin="{TemplateBinding Padding}" Opacity="0" Text="Xg"/>
<Rectangle x:Name="PlaceholderRect" Fill="{ThemeResource GridViewItemPlaceholderBackgroundThemeBrush}" IsHitTestVisible="False" Visibility="Collapsed"/>
</Grid>
</Border>
</Border>
</Border>
<Border x:Name="SelectedBorder" BorderBrush="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" BorderThickness="{ThemeResource GridViewItemMultiselectBorderThickness}" IsHitTestVisible="False" Opacity="0">
<Grid x:Name="SelectedCheckMark" HorizontalAlignment="Right" Height="34" Opacity="0" VerticalAlignment="Top" Width="34">
<Path x:Name="SelectedEarmark" Data="M0,0 L40,0 L40,40 z" Fill="{ThemeResource ListViewItemSelectedBackgroundThemeBrush}" Stretch="Fill"/>
<Path x:Name="SelectedGlyph" Data="M0,123 L39,93 L124,164 L256,18 L295,49 L124,240 z" Fill="{ThemeResource ListViewItemCheckThemeBrush}" FlowDirection="LeftToRight" HorizontalAlignment="Right" Height="14.5" Margin="0,1,1,0" Stretch="Fill" VerticalAlignment="Top" Width="17"/>
</Grid>
</Border>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
for answered item (No tilt effect): Copy above code, then find and remove these line, and don't forget change key to "ContainerWithoutTiltEffect":
<VisualStateGroup.Transitions>
<VisualTransition From="Pressed" To="Normal">
<Storyboard>
<PointerUpThemeAnimation Storyboard.TargetName="TiltContainer"/>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation Storyboard.TargetName="TiltContainer"/>
</Storyboard>
</VisualState>
Now declare ItemContainerSelector:
<local:ContainerSelector x:Key="COntainerSelector" Default="{StaticResource ContainerWithTiltEffect}" Answered="{StaticResource ContainerWithoutTiltEffect}"/>
Use ItemContainerSelector in your GridView
<GridView x:Name="ViewPlayers" IsItemClickEnabled="True" ItemTemplate="StaticResource ImageGalleryDataTemplate}" SelectionMode="None" ItemClick="PlayerClick"
ItemContainerStyleSelector="{StaticResource COntainerSelector}"/>
I'm trying to use this Control Template as a resource to give a polygon a symbol. The user chooses the colour of the polygon when the polygon is created. However when the user creates a new polygon and chooses a different colour is switches to the most recent colour for all the added polygons.
Xaml:
<!-- Polygon -->
<esri:SimpleFillSymbol x:Key="KmlPolygonStyle">
<esri:SimpleFillSymbol.ControlTemplate>
<ControlTemplate x:Name="CustomKmlPolygonTemplate">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Element"
Storyboard.TargetProperty="StrokeThickness"
To="1" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="Element"
Storyboard.TargetProperty="Fill.Opacity"
To="0.5" Duration="0:0:0.1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="MouseOver">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Element"
Storyboard.TargetProperty="StrokeThickness"
To="2" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="Element"
Storyboard.TargetProperty="Fill.Opacity"
To="0.7" Duration="0:0:0.1"/>
</Storyboard>
</VisualState>
<VisualState x:Name="Selected">
<Storyboard>
<DoubleAnimation Storyboard.TargetName="Element"
Storyboard.TargetProperty="StrokeThickness"
To="3" Duration="0:0:0.1"/>
<DoubleAnimation Storyboard.TargetName="Element"
Storyboard.TargetProperty="Fill.Opacity"
To="0.9" Duration="0:0:0.1"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Element"
Fill="{Binding Symbol.Fill}" Stroke="{Binding Symbol.BorderBrush}"
StrokeStartLineCap="Round" StrokeThickness="1"
StrokeLineJoin="Round" StrokeEndLineCap="Round" />
</Grid>
</ControlTemplate>
</esri:SimpleFillSymbol.ControlTemplate>
</esri:SimpleFillSymbol>
C# Code:
var kmlSymbol = Application.Current.Resources["KmlPolygonStyle"] as SimpleFillSymbol;
kmlSymbol.Fill = new SolidColorBrush(LayerColorPicker.SelectedColor.Color);
kmlSymbol.BorderBrush = new SolidColorBrush(LayerColorPicker.SelectedColor.Color);
kmlSymbol.BorderThickness = 1;
kmlSymbol.Fill.Opacity = 0.5;
kmlRenderer.Symbol = kmlSymbol;
How can I make each polygon added use the appropriate chosen colour.
By changing the binding to one time cleared up the problem.
... <Path x:Name="Element"
Fill="{Binding Symbol.Fill, Mode=OneTime}" Stroke="{Binding Symbol.BorderBrush, Mode=OneTime}"
StrokeStartLineCap="Round" StrokeThickness="1"
StrokeLineJoin="Round" StrokeEndLineCap="Round"/> ...
I am able to change the colour of a silverlight Pie chart or change the tooltip design. What i want is to do both.
This is the code i have for my chart:
<charts:Chart x:Name="MyChart" Title="MyChart">
<charts:Chart.LegendStyle>
<Style TargetType="datavis:Legend">
<Setter Property="Width" Value="0"/>
</Style>
</charts:Chart.LegendStyle>
<charts:PieSeries
ItemsSource="{Binding}"
IndependentValuePath="Title"
DependentValuePath="Value"
SelectionChanged="PieSeries_SelectionChanged"
DataPointStyle="{StaticResource MyPieDataPointTemplate}">
</charts:PieSeries>
</charts:Chart>
And here is the resource for myPieDataPointTemplate:
<Style x:Key="MyPieDataPointTemplate" TargetType="toolkit:PieDataPoint">
<Setter Property="BorderBrush" Value="Black"/>
<Setter Property="BorderThickness" Value="1"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="toolkit:PieDataPoint">
<Grid x:Name="Root" Opacity="0">
<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"
Storyboard.TargetName="MouseOverHighlight"
Storyboard.TargetProperty="Opacity" To="0.6"/>
</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"
Storyboard.TargetName="SelectionHighlight"
Storyboard.TargetProperty="Opacity" To="0.6"/>
</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"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="1"/>
<DoubleAnimation
Storyboard.TargetName="Slice"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="1" />
<DoubleAnimation
Storyboard.TargetName="Slice"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="1" />
</Storyboard>
</VisualState>
<VisualState x:Name="Hidden">
<Storyboard>
<DoubleAnimation Duration="0"
Storyboard.TargetName="Root"
Storyboard.TargetProperty="Opacity"
To="0"/>
<DoubleAnimation
Storyboard.TargetName="Slice"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"
To="0" />
<DoubleAnimation
Storyboard.TargetName="Slice"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"
To="0" />
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Path x:Name="Slice" Fill="{TemplateBinding Background}" Stroke="{TemplateBinding BorderBrush}" Data="{TemplateBinding Geometry}" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleX="0" ScaleY="0"/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Path.RenderTransform>
<ToolTipService.ToolTip>
<StackPanel>
<ContentControl Content="{TemplateBinding FormattedDependentValue}"/>
<ContentControl Content="{TemplateBinding FormattedRatio}"/>
</StackPanel>
</ToolTipService.ToolTip>
</Path>
<Path x:Name="SelectionHighlight" IsHitTestVisible="False" Opacity="0" Fill="Red" Data="{TemplateBinding GeometrySelection}"/>
<Path x:Name="MouseOverHighlight" IsHitTestVisible="False" Opacity="0" Fill="White" Data="{TemplateBinding GeometryHighlight}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I have a style defined for listboxitem in a resource dictionary. I want to use this style in a cs file of listbox :
I am doing the below thing but it gives me null ,CustomListBoxItemStyle is a name of a key given to the style.
public class CustomListBox : ListBox
{
public CustomListBox()
{
this.ItemContainerStyle = Application.Current.Resources["CustomListBoxItemStyle"] as Style;
}
}
There is no xaml for this.
How to achieve this?
I have a style defined for listboxitem in a resource dictionary.
but is that resource dictionary merged into the application's resource dictionary. It doesn't happen automatically you need to include it in the App.xaml like this:-
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="MyResourceDictionary.xaml" />
</ResourceDictionary.MergedDictionaries>
<!-- other resource defined directly in app xaml -->
</ResourceDictionary>
</Application.Resources>
Ok i tried almost every thing but there was no way to get rid of getting the this.ItemContainerStyle = null
So i changed the way of doing , Instead setting the ItemContainerStyle in a customlistbox.cs inherited from Listbox..I removed it from there.
Then where I was using mine custom listbox that was a usercontrol, so there was axaml for it :), hence i defined my ItemContainerStyle in the usercontrol.resource as shown below :
<UserControl.Resources>
<Style x:Key="CustomListBoxItemStyle" TargetType="ChargeEntry:CustomListBoxItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ChargeEntry:CustomListBoxItem">
<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=".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>
<Grid HorizontalAlignment="Stretch">
<TextBlock x:Name="txtName" />
</Grid>
<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>
</UserControl.Resources>
and then used it to custom listbox defined inside the usercontrol only..
<CustomListBox x:Name="lstComboBoxResult" ItemContainerStyle="{StaticResource CustomListBoxItemStyle}" />