Develop Reference

How to use external Canvas xaml in resource

I'm creating a wpf application in Visual Studio 2017.
I have some icons as separate files in xaml format. They look something like this:
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_connect" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="36.7542" Height="36.7542" Canvas.Left="19.6229" Canvas.Top="19.6229" Stretch="Fill" Fill="#FF000000" Data="F1 M 25.7639,28.0031L 20.0866,22.3258C 19.4683,21.7075 19.4683,20.705 20.0866,20.0866C 20.705,19.4683 21.7075,19.4683 22.3258,20.0867L 28.0031,25.7639C 32.3443,22.5092 38.5302,22.856 42.4783,26.8042L 26.8041,42.4784C 22.856,38.5302 22.5092,32.3443 25.7639,28.0031 Z M 49.1958,33.5217C 53.144,37.4699 53.4908,43.6557 50.2361,47.9969L 55.9133,53.6742C 56.5317,54.2925 56.5317,55.295 55.9133,55.9134C 55.295,56.5317 54.2925,56.5317 53.6742,55.9134L 47.9969,50.2361C 43.6557,53.4908 37.4698,53.1441 33.5216,49.1959L 36.8804,45.8371L 34.0814,43.0381C 33.1539,42.1107 33.1539,40.6069 34.0814,39.6794C 35.0089,38.7519 36.5127,38.7519 37.4402,39.6794L 40.2392,42.4784L 42.4783,40.2392L 39.6794,37.4402C 38.7519,36.5127 38.7519,35.009 39.6794,34.0815C 40.6069,33.154 42.1106,33.154 43.0381,34.0815L 45.8371,36.8804L 49.1958,33.5217 Z "/>
</Canvas>
I notice they don't have an x:Key just an x:Name
I have got them to work by copying & pasting the code into my resource library and adding an x:Key to reference them using
<Viewbox>
<ContentControl Content="{StaticResource appbar_connect}" />
</Viewbox>
in my main window xaml.
But is there any way to just drop them into a folder and reference them by the name without having to open each one and copy & paste and add x:Tags?

Not exactly what you was asking for but to manage my icons I have a ressourceDictonary containing all the icons as style and i select them using their x:Key like so:
</ResourceDictionary>
<Style TargetType="{x:Type Path}" x:Key="Close">
<Setter Property="Stroke" Value="Black"/>
<Setter Property="Data" Value="M 15.125 12.28125 [...]Z"/>
</Style>
[...]
<Style TargetType="{x:Type Path}" x:Key="Reload">
<Setter Property="Stroke" Value="Black"/>
<Setter Property="Data" Value="M 20 4 C 15.054688 4 11 [...]Z"/>
</Style>
</ResourceDictionary>
Usage:
<Button>
<Viewbox Height="25">
<Path Fill="{StaticResource stdBackGround}" Style="{StaticResource Close}"/>
</Viewbox>
</Button>

ContentPresenter loads resource only first occurence [WPF]

I have WPF view, where I use buttons with style that I created by myself. In this style I use some icon from resources, that I pass by TemplateBinding.
Unfortunately I faced strange problem: the resource is shown only at first occurrence of button with this style. In next buttons I have empty box.
Style:
<Style x:Key="TransparentStyle" TargetType="{x:Type Button}">
<Setter Property="BorderBrush" Value="LightSlateGray"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid>
<Rectangle Width="13" Height="15" x:Name="IconBrush">
<Rectangle.Fill>
<SolidColorBrush Color="DarkGray"></SolidColorBrush>
</Rectangle.Fill>
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<ContentPresenter Content="{TemplateBinding Button.Content}" />
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<ControlTemplate.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="IconBrush"
Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
To="Black" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<BeginStoryboard>
<Storyboard>
<ColorAnimation Duration="0:0:0.1" Storyboard.TargetName="IconBrush"
Storyboard.TargetProperty="Fill.(SolidColorBrush.Color)"
To="DarkGray" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Usege:
<WrapPanel Grid.Column="2" Margin="20 0">
<Button Height="35" Width="35" Margin="3 3" Content="{StaticResource trash}" Style ="{StaticResource TransparentStyle}"/>
<Button Height="35" Width="35" Margin="3 3" Content="{StaticResource trash}" Style ="{StaticResource TransparentStyle}" />
</WrapPanel>
What is interesting, when I use another resources, they work at their first occurrences. So if I use another_res instead of trash, it works at first time.
How do I fix it?
EDIT:
Next tests show, that when I use any resource in style and problem repeats:
<VisualBrush.Visual>
<ContentPresenter Content="{DynamicResource some_resource}" />
</VisualBrush.Visual>
EDIT2:
The resource is defined in external source:
<Window.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source="/Resources/Icons.xaml" />
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Window.Resources>
As canvas:
<Canvas x:Key="trash" Width="24" Height="24">
<Path Data="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" Fill="Black" />
</Canvas>

Don't define your Icons like(I hope this is your problem as this is what people usually do, and Image is a FrameworkElement):
<Image Source="Resources/SOF.gif" x:Key="trash"/>
Define them like:
<ImageBrush ImageSource="Resources/SOF.gif" x:Key="trash"/>
and use ImageBrush like(in your style):
<Rectangle Width="113" Height="95" x:Name="IconBrush" Fill="{Binding RelativeSource={RelativeSource Mode=TemplatedParent},Path=Content}"/>
your Icons will be repeated on buttons like below:
Update:
try it like:
<VisualBrush x:Key="trash" >
<VisualBrush.Visual>
<Canvas Width="24" Height="24" >
<Path Data="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z" Fill="Black" />
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
OutPut:(make sure to use Rectangle fill correctly as I have mentioned above)

Change content of contentcontrol on mouse over (Freezable cannot be frozen)

I have a viewbox with a contentcontrol in it.
This contentcontrol refers to a canvas resource. Now on mouseover I want to change the content of the contentcontrol to another canvas resource.
code:
<StackPanel x:Name="ExtraActionsPanel" Background="{DynamicResource DarkGrey}" Grid.ColumnSpan="3" Height="38.5" VerticalAlignment="Bottom">
<Viewbox x:Name="ActionIconBox1" Width="50" >
<ContentControl Content="{DynamicResource action_message}"/>
</Viewbox>
</StackPanel>
My app.xaml where the resources are :
<Canvas x:Key="action_message" x:Shared="False" x:Name="action_message" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="38" Height="39.75" Canvas.Left="19" Canvas.Top="22" Stretch="Fill" Fill="{DynamicResource VeryLightBlue}" Data="F1 M 33,51L 36.4167,61.75L 24,51L 19,51L 19,22L 57,22L 57,51L 33,51 Z "/>
</Canvas>
<Canvas x:Key="action_message_focus" x:Shared="False" x:Name="action_message_focus" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="38" Height="39.75" Canvas.Left="19" Canvas.Top="22" Stretch="Fill" Fill="{DynamicResource Blue}" Data="F1 M 33,51L 36.4167,61.75L 24,51L 19,51L 19,22L 57,22L 57,51L 33,51 Z "/>
</Canvas>
I've tried to use a Storyboard and a trigger to change the content on mouse over but that gives me a exception : Freezable cannot be frozen.
<UserControl.Resources>
<Storyboard x:Key="OnMouseEnter1">
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="(ContentControl.Content)" Storyboard.TargetName="contentControl">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource action_message_focus}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</UserControl.Resources>
<UserControl.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter" SourceName="ActionIconBox1">
<BeginStoryboard Storyboard="{StaticResource OnMouseEnter1}"/>
</EventTrigger>
</UserControl.Triggers>

I tried with the style triggers and it worked. Below is the style definition.
<ContentControl>
<ContentControl.Style>
<Style TargetType="ContentControl">
<Setter Property="Content" Value="{StaticResource action_message}"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="true">
<Setter Property="Content" Value="{StaticResource action_message_focus}"/>
</Trigger>
</Style.Triggers>
</Style>
</ContentControl.Style>
</ContentControl>

From the Freezable Objects Overview page at MSDN:
A Freezable can't be frozen if any of the following are true:
•
It has animated or data bound properties.
•
It has properties set by a dynamic resource. (See the Resources Overview for more information about dynamic resources.)
•
It contains Freezable sub-objects that can't be frozen.
I'm guessing that it applies to your Canvas control because you have a Path object inside it that itself can't be frozen because of the DynaimcResource it uses.

wp7 c# implement trigger on control template

I'm building a small wp7 application in which I have a star user control, when the star is clicked its color changes.
Here's the code I've got:
<Grid.Resources>
<ControlTemplate x:Key="starTemplate" TargetType="ToggleButton">
<Viewbox>
<Path Name="star" Fill="Gray" Data="F1 M 145.637,174.227L 127.619,110.39L 180.809,70.7577L 114.528,68.1664L 93.2725,5.33333L 70.3262,67.569L 4,68.3681L 56.0988,109.423L 36.3629,172.75L 91.508,135.888L 145.637,174.227 Z"/>
</Viewbox>
<ControlTemplate.Triggers>
<Trigger Property="IsChecked" Value="True">
<Setter TargetName="star" Property="Fill" Value="White"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Grid.Resources>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<ToggleButton Grid.Column="0" Tag="1" Cursor="Hand" Template="{StaticResource starTemplate}" Click="RatingButtonClickEventHandler"/>
the problem is that its giving me an error on the trigger:
The attachable property 'Triggers' was not found in type 'ControlTemplate'
I've read in this link that silverlight 3 doesn't support style triggers and that I have to implement DataTrigger somewhere. The question is How?

wpf - why does this XAML override template not work

Any ideas regarding why the WPF XAML code I have is not working. I'm trying to override the WPFToolkit charting display, and have taken their default XAML and included in my Grid.Resources section as a means of overriding. Specifically I'm wanting to remove the graph markers, but this specific question pertains to clarifying my understanding of XAML by asking why these specific approaches do not work:
a) - I've tried putting Visibility="Hidden in the Grid element but this doesn't seem to work? Why would this be?
b) tried taking out all the lines in the tag, however this doesn't work. Why would this be? Should this not override things. I'm wondering if my whole override template here is really working at all for LineDataPoint? (I do note that the LineSeries override I have in the below code however do work)
XAML is:
<!-- charting:LineSeries -->
<Style TargetType="chartingToolkit:LineSeries">
<Setter Property="IsTabStop" Value="False" />
<Setter Property="PolylineStyle">
<Setter.Value>
<Style TargetType="Polyline">
<Setter Property="StrokeThickness" Value="1" />
</Style>
</Setter.Value>
</Setter>
</Style>
<!-- charting:LineDataPoint -->
<Style TargetType="chartingToolkit:LineDataPoint">
<Setter Property="Background" Value="Orange" />
<Setter Property="BorderBrush" Value="Red" />
<Setter Property="BorderThickness" Value="1" />
<Setter Property="IsTabStop" Value="False" />
<Setter Property="Width" Value="2" />
<Setter Property="Height" Value="2" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
<Grid x:Name="Root" Opacity="0" Visibility="Hidden">
<Ellipse Stroke="{TemplateBinding BorderBrush}" Fill="{TemplateBinding Background}" Height="30"/>
<Ellipse RenderTransformOrigin="0.661,0.321">
<Ellipse.Fill>
<RadialGradientBrush GradientOrigin="0.681,0.308">
<GradientStop Color="Green" />
<GradientStop Color="#FFFFFFFF" Offset="1" />
</RadialGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse x:Name="SelectionHighlight" Opacity="0" Fill="Red" />
<Ellipse x:Name="MouseOverHighlight" Opacity="0" Fill="White" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<chartingToolkit:Chart Title="Engine Performance">
<!-- Power curve -->
<chartingToolkit:LineSeries
Title="Power"
ItemsSource="{StaticResource EngineMeasurementCollection}"
IndependentValueBinding="{Binding Speed}"
DependentValueBinding="{Binding Power}">
<!-- Vertical axis for power curve -->
<chartingToolkit:LineSeries.DependentRangeAxis>
<chartingToolkit:LinearAxis
Orientation="Y"
Title="Power (hp)"
Minimum="0"
Maximum="250"
Interval="50"
ShowGridLines="True"/>
</chartingToolkit:LineSeries.DependentRangeAxis>
</chartingToolkit:LineSeries>
<!-- Torque curve -->
<chartingToolkit:LineSeries
Title="Torque"
ItemsSource="{StaticResource EngineMeasurementCollection}"
IndependentValueBinding="{Binding Speed}"
DependentValueBinding="{Binding Torque}">
<!-- Vertical axis for torque curve -->
<chartingToolkit:LineSeries.DependentRangeAxis>
<chartingToolkit:LinearAxis
Orientation="Y"
Title="Torque (lb-ft)"
Minimum="50"
Maximum="300"
Interval="50"/>
</chartingToolkit:LineSeries.DependentRangeAxis>
</chartingToolkit:LineSeries>
<chartingToolkit:Chart.Axes>
<!-- Shared horizontal axis -->
<chartingToolkit:LinearAxis
Orientation="X"
Title="Speed (rpm)"
Interval="1000"
ShowGridLines="True"/>
</chartingToolkit:Chart.Axes>
</chartingToolkit:Chart>
</Grid>
EDIT:
PS. I've boiled it down to the fact the template isn't picked up it seem in the code below - but it should be picked up no? i.e. I have NOT set an x:key against
<Window x:Class="MyInternetUsage.EnginePerformance"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:chartingToolkit="clr-namespace:System.Windows.Controls.DataVisualization.Charting;assembly=System.Windows.Controls.DataVisualization.Toolkit" xmlns:local="clr-namespace:DataVisualizationDemos" xmlns:datavis="clr-namespace:System.Windows.Controls.DataVisualization;assembly=System.Windows.Controls.DataVisualization.Toolkit" Title="EnginePerformance" Height="277" Width="371">
<Grid>
<Grid.Resources>
<local:EngineMeasurementCollection x:Key="EngineMeasurementCollection"/>
<!-- charting:LineDataPoint -->
<Style TargetType="chartingToolkit:LineDataPoint">
<Setter Property="Background" Value="Orange" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="chartingToolkit:LineDataPoint">
<Grid
Width="30"
Height="30"
Background="{TemplateBinding Background}"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<chartingToolkit:Chart Title="Engine Performance">
<!-- Power curve -->
<chartingToolkit:LineSeries
Title="Power"
ItemsSource="{StaticResource EngineMeasurementCollection}"
IndependentValueBinding="{Binding Speed}"
DependentValueBinding="{Binding Power}">
</chartingToolkit:LineSeries>
</chartingToolkit:Chart>
</Grid>
</Window>
thanks

It is possible that the LineDataPoint is not templatable or at least not fully, by virtue of having many of its style properties defined internally.
You can set a default style as you've done, and this works very well for the "lookless" controls that are part of the framework, because they are designed with templating in mind (and so make use of TemplateBindings), but if a control, for example, declares internally that its background is purple, you cannot override this with a style.
It is also possible that what you're seeing is not actually the background of the control itself, rather the background of a constituent control within. If the component designed does not "pass through" the property, setting values on the control itself won't affect the internal parts that you see.
Finally, it is possible that Chart defines a default style for LineDataPoint. Being in a narrower scope than your grid resource, this would take precedence.
If you have access to the source, you can suss this out; without the source or good documentation of the component, it is just a frustrating trial-and-error guessing game as to what is going on.