Wie Canvas Xaml Ressource in Usercontrol

Question

hinzufügen Ich habe dieses Paket heruntergeladen: http://modernuiicons.com/ und ich versuche, die Xaml-Symbole zu verwenden.

Ich habe eine XAML-Datei zu meiner Lösung mit folgendem Inhalt

<?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> 

Nun, wie Referenz ich diese Leinwand zu meinem Usercontrol hinzugefügt?

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> 

kann ich den Inhalt der Leinwand offcourse kopieren, aber es muss eine andere Lösung sein.

Answer 1

Fügen Sie die Canvas und Path als Ressource auf der Seite oder in der App.xaml oder was auch immer hinzu, vergessen Sie nicht, x:Key einzustellen. Verwenden Sie dann eine ContentControl, um auf die Ressource zu verweisen.

<!-- 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> 

Als Beweis funktioniert es, ich konnte sehen, es ist ein Tick!

Nur eine Randnotiz, nehme ich oft nur die Pfaddaten, die Mini-Markup und speichern Sie das als String-Ressource. Dann unter Verwendung einer Path referenziere ich die Markup-Ressource über Data={StaticResource TickPath} so kann ich die Größe des Vektors mit den Height und Width auf der Path selbst oder lassen Sie es erweitern und verkleinern durch seine Eltern durch Einstellung Stretch="Uniform". Speichert den Overhead des 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} /> 

Diese Technik funktioniert möglicherweise nicht in diesem Fall, da dort eine Clip-Geometrie vorhanden ist. Aber für einfache Vektoren ist es in Ordnung, ich habe Hand gezeichnete Schriften (die nicht als Schriften eingebettet werden können) als Markup in Dateien gespeichert, ich lade sie dann zur Laufzeit - Data={Binding PathData} funktioniert genauso gut.

Answer 2

Eine Variation, die auf Lukes Antwort basiert, die es erlaubt, eine Farbe bis auf den Pfad anzugeben.

<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> 

und

<Button Command="{Binding ConnectCommand}" VerticalAlignment="Stretch"> 
    <WrapPanel> 
     <ContentControl Foreground="AliceBlue" Style="{StaticResource TickIcon}" Width="20" /> 
     <TextBlock>Connect</TextBlock> 
    </WrapPanel> 
</Button>