2016-05-19 9 views
2

最近、C#WPFを使用するようになったのは、コントロールを装飾するオプションが増えたためです。今私はそれの隣のテキストと小さな検索の後に私はa post that seemed helpfullを見つけたアイコンを持つボタンを作ってみたかった。そして私は、私が望むものを得る正しい方法だと思っていますが、どのようにして各ボタンのアイコンを個別に割り当てることができるのか理解できません。Wpf resourcededictionaryのデータバインド

これは私が現在のボタンのために使用しているコードです:

<!-- Resource Dictionary--> 
<Style TargetType="{x:Type Button}" x:Key="Test"> 
    <Setter Property="Background" Value="#373737" /> 
    <Setter Property="Foreground" Value="White" /> 
    <Setter Property="FontSize" Value="15" /> 
    <Setter Property="SnapsToDevicePixels" Value="True" /> 

    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="{x:Type Button}"> 
       <Border CornerRadius="4" Background="{TemplateBinding Background}"> 
        <Grid> 
         <Canvas x:Name="ButtonImage" Width="40" Height="40" HorizontalAlignment="Left" Margin="10,0,0,0"> 
          <Canvas.Background> 
           <ImageBrush ImageSource="F:\Deze Pc\Afbeeldingen\Icons\Steel Series\Documents.ico"/> 
          </Canvas.Background> 
         </Canvas> 
         <Path x:Name="PathIcon" Width="15" Height="25" Stretch="Fill" Fill="#4C87B3" HorizontalAlignment="Left" Margin="20,0,0,0" /> 
         <ContentPresenter x:Name="MyContentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="60,0,0,0" /> 
        </Grid> 
       </Border> 

       <ControlTemplate.Triggers> 
        <Trigger Property="IsMouseOver" Value="True"> 
         <Setter Property="Background" Value="#E59400" /> 
         <Setter Property="Foreground" Value="White" /> 
         <Setter TargetName="PathIcon" Property="Fill" Value="Black" /> 
        </Trigger> 

        <Trigger Property="IsPressed" Value="True"> 
         <Setter Property="Background" Value="OrangeRed" /> 
         <Setter Property="Foreground" Value="White" /> 
        </Trigger> 
       </ControlTemplate.Triggers> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

<!--Window Xaml --> 
<Button Width="200" Height="50" VerticalAlignment="Top" Grid.Row="2" Style="{StaticResource Test}" > 
     <Button.Content> 
      <StackPanel> 
       <TextBlock Text="Button text here" FontSize="20" /> 
      </StackPanel> 
     </Button.Content> 
    </Button> 

しかし、今、私はそれが私がではなく、ウィンドウのXAML側の画像を設定することができます作るのですかどのように私の質問でしたリソースディクショナリを使用して、それぞれのスタイルを作成することなく、異なるボタンに異なるアイコンを与えることができます。私はあなたが以下のようにDynamicResourceを使用する必要があると考えてい

答えて

1

を使用して、私は最も簡単なアプローチはそれにバインドすることだと考えてください。すなわち、テンプレートに:次に

<Canvas x:Name="ButtonImage" Width="40" Height="40" HorizontalAlignment="Left" Margin="10,0,0,0"> 
    <Canvas.Background> 
     <ImageBrush ImageSource="{Binding}"/> 
    </Canvas.Background> 
</Canvas> 

スタイルが使用されている場所:もちろん、あなたがリソースとして適切な画像ソースを宣言した、

<Button Width="200" Height="50" VerticalAlignment="Top" 
     Grid.Row="2" Style="{StaticResource Test}" 
     DataContext="{StaticResource imageSource1}"> 
    <Button.Content> 
     <StackPanel> 
      <TextBlock Text="Button text here" FontSize="20" /> 
     </StackPanel> 
    </Button.Content> 
</Button> 

、例えば:

<BitmapImage x:Key="imageSource1" 
      UriSource="F:\Deze Pc\Afbeeldingen\Icons\Steel Series\Documents.ico"/> 

代替は、次のとおりです。

  1. を使用しますTag同じ目的のためのプロパティ。この場合、もう少し複雑です。たとえば、TagプロパティをBorder要素に渡す必要があります。 <Border x:Name="root" Tag="{TemplateBinding Tag}" ...>とし、それをテンプレートなどで参照してください。 <ImageBrush ImageSource="{Binding Tag, ElementName=root}"/>
  2. 必要なプロパティ値を保持する特定のデータ構造を作成します。この場合でも、DataContextを使用し、{Binding PropertyName}という構文でプロパティにアクセスする必要があります。これは、上記の主な提案よりも優れていません。これは、クライアントサイトからテンプレートに複数の値を渡す必要がある場合に使用できます。
0

<Image Source="{DynamicResource ResourceKey=Img}"/> 

Referance

か、すでに何のためのテンプレートでDataContextを使用していないと仮定すると、RelativeSource

<Image Source="{Binding Path=Tag, RelativeSource={RelativeSource TemplatedParent}}" /> 
関連する問題