I have an user control like this.
Button
Viewbox
ContentPresenter
Grid
Path
I need to change Button.Viewbox.Grid.Path.Fill color.
Is there any way to do this?
My Style.xaml:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="PathStyle" TargetType="{x:Type Viewbox}">
<!-- ?????????????????? -->
</Style>
I tried this
<Button>
<Viewbox Width="18" Height="18" Style="{DynamicResource PathStyle}">
<ContentPresenter Content="{Binding Converter={StaticResource uriToUIElementConverter}, ConverterParameter=Images/New.xaml}"></ContentPresenter>
</Viewbox>
</Button>
New.Xaml
<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation">
<Path xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="newDocument" Fill="#FF000000" Stretch="Fill">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M43,30L50.75,30 43,22.25 43,30z M52,34L39,34 39,21 24,21 24,45 20,45 20,17 43.25,17 56,29.75 56,59 34,59 34,55 52,55 52,34z M28,38L33,38 33,46 41,46 41,51 33,51 33,59 28,59 28,51 20,51 20,46 28,46 28,38z M20,59L20,52 24,52 24,55 27,55 27,59 20,59z" />
</Path.Data>
</Path>
</Grid>
Uhm,
<Path Fill="Red" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Name="newDocument" Stretch="Fill">
<Path.Data>
<PathGeometry FillRule="Nonzero" Figures="M43,30L50.75,30 43,22.25 43,30z M52,34L39,34 39,21 24,21 24,45 20,45 20,17 43.25,17 56,29.75 56,59 34,59 34,55 52,55 52,34z M28,38L33,38 33,46 41,46 41,51 33,51 33,59 28,59 28,51 20,51 20,46 28,46 28,38z M20,59L20,52 24,52 24,55 27,55 27,59 20,59z" />
</Path.Data>
</Path>
?
Related
Hello I want to make a button with icon, using Rectangle:
<Style x:Key="CancelButton" TargetType="Button" BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Content">
<Setter.Value>
<Rectangle>
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Canvas Width="76.0106" Height="76.0106" Clip="F1 M 0,0L 76.0106,0L 76.0106,76.0106L 0,76.0106L 0,0">
<Path Width="34.8358" Height="32.9005" Canvas.Left="20.5862" Canvas.Top="20.5864" Stretch="Fill" Fill="{DynamicResource RedBrush}" Data="F1 M 25.3362,20.5864L 25.3348,29.2137C 28.5107,25.8499 33.0116,23.7507 38.0029,23.7507C 47.6232,23.7507 55.422,31.5494 55.422,41.1698C 55.422,45.9799 53.4723,50.3347 50.32,53.4869L 46.401,49.5679C 48.5503,47.4187 49.8796,44.4495 49.8796,41.1699C 49.8796,34.6106 44.5623,29.2932 38.003,29.2932C 34.4855,29.2932 31.3251,30.8224 29.1504,33.2522L 38.0029,33.2531L 33.2529,38.0031L 20.5862,38.0031L 20.5862,25.3364L 25.3362,20.5864 Z "/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
</Setter.Value>
</Setter>
</Style>
When I apply such style to the button, nothing happens. It doesn't work.
Am I doing anything wrong?
You should set the Width, Height and Fill properties of the Rectangle:
<Rectangle Width="76.0106" Height="76.0106" Fill="Gray">
<Rectangle.OpacityMask>
<VisualBrush Stretch="Fill">
<VisualBrush.Visual>
<Canvas Width="76.0106" Height="76.0106" Clip="F1 M 0,0L 76.0106,0L 76.0106,76.0106L 0,76.0106L 0,0">
<Path Width="34.8358" Height="32.9005" Canvas.Left="20.5862" Canvas.Top="20.5864" Stretch="Fill" Fill="Red" Data="F1 M 25.3362,20.5864L 25.3348,29.2137C 28.5107,25.8499 33.0116,23.7507 38.0029,23.7507C 47.6232,23.7507 55.422,31.5494 55.422,41.1698C 55.422,45.9799 53.4723,50.3347 50.32,53.4869L 46.401,49.5679C 48.5503,47.4187 49.8796,44.4495 49.8796,41.1699C 49.8796,34.6106 44.5623,29.2932 38.003,29.2932C 34.4855,29.2932 31.3251,30.8224 29.1504,33.2522L 38.0029,33.2531L 33.2529,38.0031L 20.5862,38.0031L 20.5862,25.3364L 25.3362,20.5864 Z "/>
</Canvas>
</VisualBrush.Visual>
</VisualBrush>
</Rectangle.OpacityMask>
</Rectangle>
I've done some searching but I can't seem to find a way to use both a drop shadow on my window, and have the window's background blurred.
I'm currently using https://github.com/riverar/sample-win32-acrylicblur (all blur code in MainWindow.xaml.cs) to blur the background, but since the dropshadow requires some padding in the window to render the dropshadow in, the space of the dropshadow gets the blur applied to it too.
I tried using an OpacityMask, but that didn't seem to help. In fact, even when setting the Window's Opacity property to 0, the blur still showed, so I fear that it's not possible with this method of blurring.
One of the packages I already am using is Microsoft.Windows.Shell, which I need to rebuild the default buttons I lose after applying the drop shadow, perhaps this has something helpful.
TLDR:
Is there a way to use an Aero-style blurred Window and a drop shadow together? Ideally without installing extra packages, but if there's no other way I'll have to bite the bullet.
I'm on the latest versions of .Net etc. as of 03/08/2018
Do you mean the effect shown below?
If so, you can write the XAML code to get it.
<Window x:Class="Walterlv.Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Title="MainWindow" Height="450" Width="800"
AllowsTransparency="True" WindowStyle="None" Background="{x:Null}">
<Grid>
<Rectangle x:Name="ShadowShape" Fill="White" Margin="8">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="8" ShadowDepth="0" />
</Rectangle.Effect>
</Rectangle>
<Border x:Name="BackgroundBorder" Margin="8" ClipToBounds="True">
<Rectangle x:Name="BlurringShape" Margin="-32">
<Rectangle.Fill>
<ImageBrush ImageSource="Sample.jpg"/>
</Rectangle.Fill>
<Rectangle.Effect>
<BlurEffect KernelType="Gaussian" Radius="32" />
</Rectangle.Effect>
</Rectangle>
<Border.CacheMode>
<BitmapCache />
</Border.CacheMode>
</Border>
</Grid>
<Grid>
<!-- Write your own content here... -->
</Grid>
</Window>
Notes:
I write three UIElement to implement that effect:
The BlurringShape renders a bitmap and blur itself. It blurs at the radius 32, so it should set a -32 margin to avoid the transparent blur.
The BackgroundBorder clips the BlurringShape so that the blur will not spill over.
Because we have clipped the BackgroundBorder, so if we set a DropShadowEffect on it, it will be clipped. We should create another shape to render the DropShadowEffect. That is the ShadowShape.
If you want your style more reusable, you can take this code below:
<Window x:Class="Walterlv.Demo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Title="MainWindow" Height="450" Width="800">
<Window.Background>
<ImageBrush ImageSource="High+Sierra.jpg"/>
</Window.Background>
<Window.Style>
<Style TargetType="Window">
<Setter Property="AllowsTransparency" Value="True" />
<Setter Property="WindowStyle" Value="None" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Window">
<Grid>
<Rectangle Fill="White" Margin="8">
<Rectangle.Effect>
<DropShadowEffect BlurRadius="8" ShadowDepth="0" />
</Rectangle.Effect>
</Rectangle>
<Border x:Name="BackgroundBorder" Margin="8" ClipToBounds="True">
<Rectangle Margin="-32" Fill="{TemplateBinding Background}">
<Rectangle.Effect>
<BlurEffect KernelType="Gaussian" Radius="32" />
</Rectangle.Effect>
</Rectangle>
<Border.CacheMode>
<BitmapCache />
</Border.CacheMode>
</Border>
<ContentPresenter Margin="8" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Style>
<Grid>
<!-- Write your own content here ... -->
</Grid>
</Window>
I need to reuse some vector images. I've implemented this using styles for a path setting the Data property.
When this style is applied in a DataTemplate set to a ListView, only the first item actually shows the path. The Path is visible in live outline during my debugging session. Design time it does show in each item.
I have already tried to make the style unshared using x:Shared="False" however this causes the hard to understand XBF generation error code 0x09c4. compile error.
<!-- Path Style defined in a seperate resource dictionary -->
<Style x:Key="Icon" TargetType="Path">
<Setter Property="Data" Value="F1 M32,32z M0,0z M8,7L8,8 8,9 5,9 4,9 4,10 4,24 4,25 5,25 27,25 28,25 28,24 28,10 28,9 27,9 24,9 24,8 24,7 23,7 19,7 18,7 18,8 18,9 14,9 14,8 14,7 13,7 9,7 8,7z M10,9L12,9 12,10 12,11 13,11 19,11 20,11 20,10 20,9 22,9 22,10 22,11 23,11 26,11 26,23 6,23 6,11 9,11 10,11 10,10 10,9z"/>
</Style>
<!-- DataTemplate defined in a seperate resource dictionary-->
<DataTemplate x:Key="ListViewItem">
<ViewBox>
<Path Style="{StaticResource Icon}" Fill="{StaticResource IconBrush}"/>
</ViewBox>
</DataTemplate>
<!-- DataTemplate applied on a page -->
<ListView
ItemTemplate="{StaticResource ListViewItem}"
ItemsSource={Binding Items}>
</ListView>
Does anyone have any ideas about what might cause this behaviour and how it can be solved?
This is a known issue since the days with Silverlight. When used inside a style, the Path will only be instantiated once. Unlike in WPF, there's no x:Shared="False" to force creating a new instance every time it's requested.
That leaves you with three other options.
First, you can use the Path directly inside your DataTemplate.
<DataTemplate x:Key="ListViewItem">
<Viewbox>
<Path Data="F1 M32,32z M0,0z M8,7L8,8 8,9 5,9 4,9 4,10 4,24 4,25 5,25 27,25 28,25 28,24 28,10 28,9 27,9 24,9 24,8 24,7 23,7 19,7 18,7 18,8 18,9 14,9 14,8 14,7 13,7 9,7 8,7z M10,9L12,9 12,10 12,11 13,11 19,11 20,11 20,10 20,9 22,9 22,10 22,11 23,11 26,11 26,23 6,23 6,11 9,11 10,11 10,10 10,9z" Fill="Red"/>
</Viewbox>
</DataTemplate>
For more flexibility, you can also use a ContentControl instead.
<Style x:Key="Icon" TargetType="ContentControl">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Path Fill="Red" Data="F1 M32,32z M0,0z M8,7L8,8 8,9 5,9 4,9 4,10 4,24 4,25 5,25 27,25 28,25 28,24 28,10 28,9 27,9 24,9 24,8 24,7 23,7 19,7 18,7 18,8 18,9 14,9 14,8 14,7 13,7 9,7 8,7z M10,9L12,9 12,10 12,11 13,11 19,11 20,11 20,10 20,9 22,9 22,10 22,11 23,11 26,11 26,23 6,23 6,11 9,11 10,11 10,10 10,9z"/>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
<DataTemplate x:Key="ListViewItem">
<Viewbox>
<ContentControl Style="{StaticResource Icon}"/>
</Viewbox>
</DataTemplate>
The last one is probably the best but it will require some work to change the Data property to a more specific PathGeometry.
<Style x:Key="Icon" TargetType="Path">
<Setter Property="Data">
<Setter.Value>
<PathGeometry FillRule="EvenOdd">
<PathFigure IsClosed="True" StartPoint="0,0">
<LineSegment Point="xxx,xxx" />
<LineSegment Point="xxx,xxx" />
</PathFigure>
</PathGeometry>
</Setter.Value>
</Setter>
</Style>
I have downloaded this pack : http://modernuiicons.com/ and I'm trying to use the xaml icons.
I have added a xaml file to my solution with the following content
<?xml version="1.0" encoding="utf-8"?>
<Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>
Now, how do I reference this canvas to my usercontrol?
Usercontrol
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" xmlns:ei="http://schemas.microsoft.com/expression/2010/interactions"
mc:Ignorable="d"
x:Class="UserControlSolution.UserControlButton"
x:Name="UserControl"
Height="50" Background="#FF2F2F2F" BorderBrush="#FF919191">
<Grid x:Name="LayoutRoot" Height="50" RenderTransformOrigin="0.5,0.5">
<Rectangle x:Name="rectangle" RenderTransformOrigin="0.5,0.5" Width="230" Height="50"/>
<TextBlock x:Name="NameLabel" FontSize="16" Foreground="#FFE5E5E5" Height="34" Width="149" Text="Onthaal Telefoon" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,10,0,0" FontFamily="Segoe UI Semibold"/>
<Viewbox HorizontalAlignment="Right" VerticalAlignment="Top" Height="16.5" Width="17.789" Margin="0,15,24.5,0">
// Here I want to reference the canvas
</Viewbox>
</Grid>
</UserControl>
I can copy the content of the canvas offcourse but there must be another solution.
Add the Canvas and Path as a resource on the page or in the App.xaml or whatever, remember to set x:Key. Then use a ContentControl to reference the resource.
<!-- In Resources, either on the Page or App.xaml for app-wide reuse -->
<Canvas x:Key="TickCanvas" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="#FF000000" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas
<!-- On your page, or somewhere -->
<ViewBox>
<ContentControl Content="{StaticResource TickCanvas}" />
</ViewBox>
As proof it works, I was able to see its a tick!
Just a side note, I often take just the path data, the mini-markup and save that as a string resource. Then using a Path I reference the markup resource via Data={StaticResource TickPath} that way I can resize the vector using the Height and Width on the Path itself or let it expand and shrink by its parent by setting Stretch="Uniform". Saves the overhead of the Viewbox.
<!-- In App.xaml for app-wide reuse -->
<x:String x:Key="TickPath">F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z </x:String>
<!-- On page, template or wherever -->
<Path Data="{StaticResource TickPath} />
This technique may not work in this instance as there's a clip geometry there. But for simple vectors its fine, I have hand drawn typefaces (that can't be embedded as fonts) stored as markup in files, I then load them in at runtime - Data={Binding PathData} works just as well.
A variation based on Luke's answer allowing a color to be specified down to the path.
<Style TargetType="{x:Type ContentControl}" x:Key="TickIcon">
<Setter Property="ContentTemplate">
<Setter.Value>
<DataTemplate>
<Viewbox Width="{Binding Width, RelativeSource={RelativeSource AncestorType=ContentControl}}">
<Canvas x:Name="appbar_check" Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="37.9998" Height="31.6665" Canvas.Left="19.0001" Canvas.Top="22.1668" Stretch="Fill" Fill="{Binding Foreground, RelativeSource={RelativeSource AncestorType=ContentControl}}" Data="F1 M 23.7501,33.25L 34.8334,44.3333L 52.2499,22.1668L 56.9999,26.9168L 34.8334,53.8333L 19.0001,38L 23.7501,33.25 Z "/>
</Canvas>
</Viewbox>
</DataTemplate>
</Setter.Value>
</Setter>
</Style>
and
<Button Command="{Binding ConnectCommand}" VerticalAlignment="Stretch">
<WrapPanel>
<ContentControl Foreground="AliceBlue" Style="{StaticResource TickIcon}" Width="20" />
<TextBlock>Connect</TextBlock>
</WrapPanel>
</Button>
I'm trying to display available Wifi networks (using ManagedWifi SDK) on a listview.
I have defined ObservableCollection of WifiNetwork (contains name, type, signal Strength(int) etc) in my viewmodel as shown below
public ObservableCollection<WifiNetwork> AvailableNetworks { get; set; }
I have defined Control templates (like 1 green bar and 4 white bars to indicate signal strength <= 20%, 2 green bars and 3 white bars to indicate signal strength between 20 to 40% etc) in Application Resources in app.xaml as shown below
<ControlTemplate x:Key="Signal1">
<Canvas Width="32" Height="32" Canvas.Left="0" Canvas.Top="0">
<Rectangle Width="5.4375" Height="11.375" Canvas.Left="0.0937499" Canvas.Top="20.6563" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF37F307"/>
<Rectangle Width="6.40625" Height="16" Canvas.Left="5.34375" Canvas.Top="16.0313" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
<Path Width="6.88835" Height="21.6562" Canvas.Left="11.75" Canvas.Top="10.375" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 12.2768,10.875L 18.1384,10.875L 18.1115,31.5313L 12.25,31.5313L 12.2768,10.875 Z "/>
<Rectangle Width="6.78126" Height="26.9687" Canvas.Left="18.5625" Canvas.Top="5.09376" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
<Rectangle Width="6.71874" Height="31.8437" Canvas.Left="25.2812" Canvas.Top="0.250002" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
</Canvas>
</ControlTemplate>
<ControlTemplate x:Key="Signal2">
<Canvas Width="32" Height="32" Canvas.Left="0" Canvas.Top="0">
<Rectangle Width="5.4375" Height="11.375" Canvas.Left="0.0937499" Canvas.Top="20.6563" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF37F307"/>
<Rectangle Width="6.40625" Height="16" Canvas.Left="5.34375" Canvas.Top="16.0313" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FF37F307"/>
<Path Width="6.88835" Height="21.6562" Canvas.Left="11.75" Canvas.Top="10.375" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF" Data="F1 M 12.2768,10.875L 18.1384,10.875L 18.1115,31.5313L 12.25,31.5313L 12.2768,10.875 Z "/>
<Rectangle Width="6.78126" Height="26.9687" Canvas.Left="18.5625" Canvas.Top="5.09376" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
<Rectangle Width="6.71874" Height="31.8437" Canvas.Left="25.2812" Canvas.Top="0.250002" Stretch="Fill" StrokeLineJoin="Round" Stroke="#FF000000" Fill="#FFFFFFFF"/>
</Canvas>
</ControlTemplate>
Now I need to return this control template from my view model to bind it to a button to show the appropriate signal strength in my listBox.
I probably need to have some kind of conversion from Signal Strength (int) to Control template.
Any suggestions / code examples to achieve this task?
This should guide to right direction:
<ItemsControl ItemsSource="{Binding AvailableNetworks }">
<ItemsControl.ItemTemplate>
<DataTemplate>
<Rectangle Width="20" Height="{Binding SignalStrength,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"
Fill="{Binding Color,Mode=TwoWay,UpdateSourceTrigger=PropertyChanged}"></Rectangle>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
I like Darek's answer, but if you really want to use control templates like this, you should use a style and a data trigger bound to the signal strength, e.g.:
<Style TargetType="{x:Type MyControl}">
<Style.Triggers>
<DataTrigger Binding="{Binding SignalStrength}" Value="1">
<Setter Property="ControlTemplate" Value="{StaticResource Signal1}"/>
</DataTrigger>
<DataTrigger Binding="{Binding SignalStrength}" Value="2">
<Setter Property="ControlTemplate" Value="{StaticResource Signal2}"/>
</DataTrigger>
<!-- and so on -->
</Style.Triggers>
</Style>
Another approach would be to just use a ItemTemplate on your listbox and to create a converter class.
Create a public class called ColorConverter and use the following code in it:
public class ColorConverter : IValueConverter
{
#region Implementation of IValueConverter
public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
{
try
{
var val = System.Convert.ToInt32(value.ToString());
var param = System.Convert.ToInt32(parameter.ToString());
return val >= param ? Brushes.Green : Brushes.White;
}
catch
{
return Brushes.White;
}
}
public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
#endregion
}
Then on the page with the ListBox assign the converter:
<Window.Resources>
<Converters:ColorConverter x:Key="colorConverter" />
</Window.Resources>
Make sure you put the namespace for "Converters" at the top of the xaml:
xmlns:Converters="clr-namespace:ProjectNameHere"
Then create a DataTemplate on your listbox using your code above, substituting the bindings to the correct forms:
<ListBox Margin="0,73,0,0" ItemsSource="{Binding AvailableNetworks}">
<ListBox.ItemTemplate>
<DataTemplate>
<Canvas Width="32"
Height="32"
Canvas.Left="0"
Canvas.Top="0">
<Rectangle Width="5.4375"
Height="11.375"
Canvas.Left="0.0937499"
Canvas.Top="20.6563"
Stretch="Fill"
StrokeLineJoin="Round"
Stroke="#FF000000"
Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=0}" />
<Rectangle Width="6.40625"
Height="16"
Canvas.Left="5.34375"
Canvas.Top="16.0313"
Stretch="Fill"
StrokeLineJoin="Round"
Stroke="#FF000000"
Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=20}" />
<Path Width="6.88835"
Height="21.6562"
Canvas.Left="11.75"
Canvas.Top="10.375"
Stretch="Fill"
StrokeLineJoin="Round"
Stroke="#FF000000"
Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=40}"
Data="F1 M 12.2768,10.875L 18.1384,10.875L 18.1115,31.5313L 12.25,31.5313L 12.2768,10.875 Z " />
<Rectangle Width="6.78126"
Height="26.9687"
Canvas.Left="18.5625"
Canvas.Top="5.09376"
Stretch="Fill"
StrokeLineJoin="Round"
Stroke="#FF000000"
Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=60}" />
<Rectangle Width="6.71874"
Height="31.8437"
Canvas.Left="25.2812"
Canvas.Top="0.250002"
Stretch="Fill"
StrokeLineJoin="Round"
Stroke="#FF000000"
Fill="{Binding Strength, Converter={StaticResource colorConverter}, ConverterParameter=80}" />
</Canvas>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The down side to doing it this way is the lack of style reuse, unlike the other methods mentioned.