usercontrolにキャンバスxamlリソースを追加する方法

Question

私はこのパックをダウンロードしました：http://modernuiicons.com/と私はxamlアイコンを使用しようとしています。

私は、次の内容

今

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

で私の解決策にXAMLファイルを追加して、どのように私は私の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> 

私はoffcourseキャンバスの内容をコピーすることができますが、別の解決策が存在しなければなりません。

Answer 1

CanvasとPathをページまたはApp.xamlなどのリソースとして追加する場合は、x:Keyに設定してください。次に、ContentControlを使用してリソースを参照します。

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

実証済みのように、私はダニを見ることができました！

ちょっとしたことに、私はしばしばパスデータ、ミニマークアップを取り、それを文字列リソースとして保存します。 Pathを使用して、マークアップリソースをData={StaticResource TickPath}で参照すると、Path自体のHeightとWidthを使用してベクターのサイズを変更することができます。または、Stretch="Uniform"を設定して親によって拡大/縮小できます。 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} /> 

この方法では、クリップジオメトリが存在するため、この方法では機能しないことがあります。しかし、シンプルなベクトルのためには、手作業で書かれた書体（フォントとして埋め込むことはできません）をファイルにマークアップとして保存しておき、実行時にロードします。Data={Binding PathData}も同様です。

Answer 2

ルークの答えに基づいたバリエーションで、色をパスまで指定できるようになりました。

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

と

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