Vector icon as button content inside style not display in design time - wpf

Question

I want to use vector icon as content inside Button style to use in multiple buttons (more than 20). So, I did like this:
my icon:
<Rectangle x:Key="DefaultsIcon" Height="20" Width="20" x:Shared="False" HorizontalAlignment="Center" VerticalAlignment="Center" Fill="{DynamicResource BlackBrush}">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="29.26" Height="32.5111" Canvas.Left="24.9269" Canvas.Top="21.3222" Stretch="Fill" Fill="{DynamicResource BlackBrush}" Data="F1 M 24.9269,53.8333L 24.9269,21.3222L 36.6106,21.3222C 48.3282,21.3222 54.1869,26.6053 54.1869,37.1714C 54.1869,42.2319 52.588,46.274 49.3901,49.2977C 46.1922,52.3215 41.9324,53.8333 36.6106,53.8333L 24.9269,53.8333 Z M 32.3581,27.36L 32.3581,47.7956L 36.0156,47.7956C 39.2231,47.7956 41.7377,46.8509 43.5591,44.9617C 45.3806,43.0725 46.2914,40.5023 46.2914,37.2512C 46.2914,34.1791 45.3879,31.7625 43.5809,30.0015C 41.7739,28.2405 39.2376,27.36 35.972,27.36L 32.3581,27.36 Z "/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
my style:
<Style TargetType="Button" BasedOn="{StaticResource CameraButtonBaseStyle}" x:Key="CameraDefaultsButtonStyle">
<Setter Property="Margin" Value="{Binding Source={StaticResource CameraUISettings}, Path=OptionLBMargin, Mode=OneWay, Converter={uiConverters:DoubleToLeftMarginConverter}}"></Setter>
<Setter Property="ToolTip" Value="{Binding Source={StaticResource CameraLocalization}, Path=ToolTips.Default, Mode=OneWay, UpdateSourceTrigger=PropertyChanged}"></Setter>
<Setter Property="Content" Value="{DynamicResource DefaultsIcon}"></Setter>
</Style>
and apply style:
<Button Style="{StaticResource CameraDefaultsButtonStyle}"
Click="LoadDefaultX_OnClick">
</Button>
But the problem here is that in design time only 1 icon of all displaying and in runtime all icons displaying good. I want that in design time icons also were visible.
How to reach this?

Answer 1

The problem is DefaultsIcon style contains a visual. The style is created only once per lifetime of your app and reused as often as needed. But a visual can only be used once in the visual tree. A quick fix is to add x:Shared="Falsed" to DefaultsIcon. From the architectural perspective that's not the best solution because now for every usage of DefaultsIcon a new instance is created.

Answer 2

Because I want to share some code I add a new answer. My question is do you need the DefaultsIcon style somewhere else? If not you could do the following to get the same result:
<Style TargetType="Button" x:Key="CameraDefaultsButtonStyle" x:Shared="False" >
<Setter Property="Margin" Value="10"></Setter>
<Setter Property="ToolTip" Value="hello"></Setter>
<Setter Property="Content">
<Setter.Value>
<Path Width="29.26" Height="32.5111" Canvas.Left="24.9269" Canvas.Top="21.3222" Stretch="Fill" Fill="Black" Data="F1 M 24.9269,53.8333L 24.9269,21.3222L 36.6106,21.3222C 48.3282,21.3222 54.1869,26.6053 54.1869,37.1714C 54.1869,42.2319 52.588,46.274 49.3901,49.2977C 46.1922,52.3215 41.9324,53.8333 36.6106,53.8333L 24.9269,53.8333 Z M 32.3581,27.36L 32.3581,47.7956L 36.0156,47.7956C 39.2231,47.7956 41.7377,46.8509 43.5591,44.9617C 45.3806,43.0725 46.2914,40.5023 46.2914,37.2512C 46.2914,34.1791 45.3879,31.7625 43.5809,30.0015C 41.7739,28.2405 39.2376,27.36 35.972,27.36L 32.3581,27.36 Z "/>
</Setter.Value>
</Setter>
</Style>
The need to set x:Shared="False" is for me a sign to think of a small user control instead of a style.

Answer 3

No, I mean a mini user control as a replacement for your CameraDefaultsButtonStyle style, not only the Content within that style. The control could look like this:
<Button x:Class="TabControl1.CameraDefaultsButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300"
ToolTip="Hello">
<Grid>
<Path Width="29.26" Height="32.5111" Stretch="Fill" Fill="Black" Data="F1 M 24.9269,53.8333L 24.9269,21.3222L 36.6106,21.3222C 48.3282,21.3222 54.1869,26.6053 54.1869,37.1714C 54.1869,42.2319 52.588,46.274 49.3901,49.2977C 46.1922,52.3215 41.9324,53.8333 36.6106,53.8333L 24.9269,53.8333 Z M 32.3581,27.36L 32.3581,47.7956L 36.0156,47.7956C 39.2231,47.7956 41.7377,46.8509 43.5591,44.9617C 45.3806,43.0725 46.2914,40.5023 46.2914,37.2512C 46.2914,34.1791 45.3879,31.7625 43.5809,30.0015C 41.7739,28.2405 39.2376,27.36 35.972,27.36L 32.3581,27.36 Z "/>
</Grid>
</Button>
using System.Windows.Controls;
namespace TabControl1
{
/// <summary>
/// Interaction logic for CameraDefaultsButton.xaml
/// </summary>
public partial class CameraDefaultsButton : Button
{
public CameraDefaultsButton ()
{
InitializeComponent ();
}
}
}
You use it this way like the standard button:
<Window x:Class="TabControl1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:sys="clr-namespace:System;assembly=mscorlib"
xmlns:local="clr-namespace:TabControl1"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:CameraDefaultsButton Margin="301,164,0,0"
HorizontalAlignment="Left"
Width="139"
Height="55"
VerticalAlignment="Top"/>
<local:CameraDefaultsButton Margin="301,236,0,0"
HorizontalAlignment="Left"
Width="139"
Height="55"
VerticalAlignment="Top"/>
</Grid>
</Window>
but don't forget to add the namespace where you use it:
xmlns:local="clr-namespace:TabControl1"