WPFのツリービュー項目での子コントロールのバインド

Question

HierarchicalDataTemplateを使用してツリービューを作成し、カスタムクラスを使用してバインドしました。ツリービューの子アイテムでは、私はチェックボックス、テキストブロックと画像を持っています。私が望むのは、UIでチェックボックスを手動でチェックすると、画像が右のサインに変わるようにすることです。 私はこれをどうやって行うのか分かりません。以下はXAMLです。

<UserControl x:Class="Repayment.TreeViewCustom" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
> 
<UserControl.Resources> 
    <SolidColorBrush x:Key="SolidColorBrush1" /> 
    <SolidColorBrush x:Key="SolidColorBrush2" /> 
    <SolidColorBrush x:Key="SolidColorBrush3" /> 
    <SolidColorBrush x:Key="SolidColorBrush4" /> 
    <SolidColorBrush x:Key="SolidColorBrush5" /> 
    <SolidColorBrush x:Key="SolidColorBrush6" /> 

    <Style TargetType="TextBlock" x:Key="HeaderTextBlock"> 
     <Setter Property="Foreground" Value="{DynamicResource SolidColorBrush4}"/> 
     <Setter Property="FontSize" Value="14"/> 
     <Setter Property="Margin" Value="10 5 10 5"/> 
     <Setter Property="FontFamily" Value="Century Gothic"/> 
     <Setter Property="FontWeight" Value="Bold"/> 
     <Setter Property="FontStyle" Value="Italic"/> 
    </Style> 

    <Style TargetType="TextBlock" x:Key="ChildTextBlock"> 
     <Setter Property="Foreground" Value="{DynamicResource SolidColorBrush3}"/> 
     <Setter Property="FontSize" Value="14"/> 
     <Setter Property="Margin" Value="10 5 10 5"/> 
     <Setter Property="FontFamily" Value="Century Gothic"/> 
     <Setter Property="FontWeight" Value="Bold"/> 
     <Setter Property="FontStyle" Value="Italic"/> 
    </Style> 
    <Style TargetType="TreeView" x:Key="BackgroundTreeView"> 
     <Setter Property="Background" Value="{DynamicResource SolidColorBrush1}"/> 
    </Style> 

    <Style x:Key="CheckBoxStyle" TargetType="{x:Type CheckBox}"> 
     <Setter Property="SnapsToDevicePixels" Value="true" /> 
     <Setter Property="OverridesDefaultStyle" Value="true" /> 
     <Setter Property="Height" Value="30" /> 
     <Setter Property="FocusVisualStyle" Value="{DynamicResource MyFocusVisualStyte}" /> 
     <Setter Property="Template"> 
      <Setter.Value> 
       <ControlTemplate TargetType="{x:Type CheckBox}"> 
        <BulletDecorator> 
         <BulletDecorator.Bullet> 
          <Grid Height="{TemplateBinding Height}" Width="{Binding RelativeSource={RelativeSource Self}, Path=Height, UpdateSourceTrigger=PropertyChanged}" 
          MinHeight="30" MinWidth="30" ShowGridLines="False"> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="4*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="4*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="1*" /> 
            <ColumnDefinition Width="2*" /> 
            <ColumnDefinition Width="2*" /> 
           </Grid.ColumnDefinitions> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="3*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="4*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="1*" /> 
            <RowDefinition Height="4*" /> 
           </Grid.RowDefinitions> 

           <Border Name="MainBorder" 
           Grid.ColumnSpan="9" Grid.RowSpan="9" 
           CornerRadius="4" 
           BorderThickness="1" 
           Background="Transparent" /> 
           <!--Transparent--> 

           <Border Name="InnerBorder" 
           Grid.Column="1" Grid.ColumnSpan="5" 
           Grid.Row="2" Grid.RowSpan="5" 
           BorderThickness="1" 
           BorderBrush="#808080" /> 
           <!--#808080--> 

           <Path Name="InnerPath" 
           Grid.Column="1" Grid.ColumnSpan="5" 
           Grid.Row="2" Grid.RowSpan="5" 
           Data="M31,5 L19.5,5 19.5,19.5 34.5,19.5 34.5,11.75" 
           Stretch="Fill" Stroke="#808080"/> 

           <Path Name="CheckMark" 
           Grid.Column="2" Grid.ColumnSpan="5" 
           Grid.Row="1" Grid.RowSpan="5" 
           Opacity="0" 
           Data="M9.07743946676476E-09,4.31805768640244L4.68740335877841,8.86361158398516C4.68740335877841,8.86361158398516,16.3281249985376,-2.42451336648723,16.3281249985376,-2.42451336648723L14.0622100581796,-4.77304938341948 4.68740335877846,4.31805791992662 2.22656251699567,1.93164208562579z" 
           Fill="#3babe3" 
           Stretch="Fill" 
           Stroke="#3babe3" /> 

           <Path Name="InderminateMark" 
           Grid.Column="3" 
           Grid.Row="4" 
           Data="M0,4 L1,5 5,1 4,0" 
           Opacity="0" 
           Stretch="Fill" 
           StrokeThickness="0" 
           Fill="#808080" /> 
          </Grid> 
         </BulletDecorator.Bullet> 
         <VisualStateManager.VisualStateGroups> 
          <VisualStateGroup x:Name="CheckStates"> 
           <VisualState x:Name="Checked"> 
            <Storyboard> 
             <DoubleAnimation Storyboard.TargetProperty="Opacity" 
             Storyboard.TargetName="CheckMark" Duration="0:0:0.1" To="1" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Unchecked" > 
            <Storyboard> 
             <DoubleAnimation Storyboard.TargetProperty="Opacity" 
             Storyboard.TargetName="CheckMark" Duration="0:0:0.2" To="0" /> 
            </Storyboard> 
           </VisualState> 
           <VisualState x:Name="Indeterminate"> 
            <Storyboard> 
             <DoubleAnimation Storyboard.TargetProperty="Opacity" 
             Storyboard.TargetName="InderminateMark" Duration="0:0:0.1" To="1" /> 
            </Storyboard> 
           </VisualState> 
          </VisualStateGroup> 
         </VisualStateManager.VisualStateGroups> 
         <ContentPresenter Margin="4,0,4,0" 
        VerticalAlignment="Center" 
        HorizontalAlignment="Left" 
        RecognizesAccessKey="True" /> 
        </BulletDecorator> 

        <ControlTemplate.Triggers> 
         <Trigger Property="IsChecked" Value="True"> 
          <Setter TargetName="InnerBorder" Property="Visibility" Value="Collapsed" /> 
         </Trigger> 
         <Trigger Property="IsPressed" Value="True"> 
          <Setter TargetName="MainBorder" Property="Background" Value="#81d2eb" /> 
         </Trigger> 
         <Trigger Property="IsEnabled" Value="False"> 
          <Setter TargetName="CheckMark" Property="Fill" Value="#cccccc" /> 
          <Setter TargetName="CheckMark" Property="Stroke" Value="#cccccc" /> 
          <Setter TargetName="InnerPath" Property="Stroke" Value="#cccccc" /> 
          <Setter TargetName="InderminateMark" Property="Fill" Value="#cccccc" /> 
          <Setter TargetName="InnerBorder" Property="BorderBrush" Value="#cccccc" /> 
         </Trigger> 
        </ControlTemplate.Triggers> 
       </ControlTemplate> 
      </Setter.Value> 
     </Setter> 
    </Style> 
</UserControl.Resources> 
<Grid> 
    <TreeView MinWidth="200" Name ="tvMain" TreeViewItem.Selected="tvMain_Selected" Style="{DynamicResource BackgroundTreeView}"> 
     <TreeView.ItemContainerStyle> 
      <Style TargetType="TreeViewItem"> 
       <Setter Property="IsExpanded" Value="True"/> 
      </Style> 
     </TreeView.ItemContainerStyle> 
     <TreeView.ItemTemplate> 
      <HierarchicalDataTemplate ItemsSource="{Binding ChildStep}"> 
       <Border MinWidth="270" Height="26" Background="{DynamicResource SolidColorBrush2}" BorderBrush="{DynamicResource SolidColorBrush1}" BorderThickness="1" CornerRadius="2" Margin="2" Padding="2"> 
        <StackPanel Orientation="Horizontal" > 
         <TextBlock Text="{Binding Name}" TextAlignment="Center" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource HeaderTextBlock}"></TextBlock> 
        </StackPanel> 
       </Border> 
       <HierarchicalDataTemplate.ItemTemplate> 
        <HierarchicalDataTemplate ItemsSource="{Binding GrandChildStep}"> 
         <Border Width="250" Background="{DynamicResource SolidColorBrush1}" BorderBrush="{DynamicResource SolidColorBrush2}" CornerRadius="2" Margin="1" > 
          <Grid> 
           <Grid.ColumnDefinitions> 
            <ColumnDefinition Width="26"></ColumnDefinition> 
            <ColumnDefinition Width="*"></ColumnDefinition> 
            <ColumnDefinition Width="26"></ColumnDefinition> 
           </Grid.ColumnDefinitions> 

           <CheckBox Checked="CheckBox_Checked" Unchecked="CheckBox_Checked" IsChecked="{Binding Path=IsCheckBoxChecked}" HorizontalAlignment="Center" VerticalAlignment="Center" Style="{DynamicResource CheckBoxStyle}" Grid.Column="0" /> 
           <TextBlock Grid.Column="1" Margin="2" Text="{Binding Path=Name}" Style="{DynamicResource ChildTextBlock}" VerticalAlignment="Center"></TextBlock> 

           <!--<Rectangle Name ="rct" Width="20" Fill="{Binding Path=Color}" Grid.Column="1" HorizontalAlignment="Right" Margin="2"></Rectangle>--> 
           <Image Grid.Column="2" Source="{Binding ImageUrl}" HorizontalAlignment="Right" Margin="2"></Image> 

          </Grid> 
         </Border> 
         <HierarchicalDataTemplate.ItemTemplate> 
          <DataTemplate> 
           <Border Width="200" Background="LightBlue" CornerRadius="2" Margin="1" > 
            <Grid> 
             <Grid.ColumnDefinitions> 
              <ColumnDefinition Width="*"></ColumnDefinition> 
              <ColumnDefinition Width="26"></ColumnDefinition> 
             </Grid.ColumnDefinitions> 

             <TextBlock Margin="2" Text="{Binding Path=Name}" FontWeight="Bold" VerticalAlignment="Center"></TextBlock> 
             <Rectangle Width="20" Fill="DarkOrchid" Grid.Column="1" HorizontalAlignment="Right" Margin="2"></Rectangle> 

            </Grid> 
           </Border> 
          </DataTemplate> 
         </HierarchicalDataTemplate.ItemTemplate> 
        </HierarchicalDataTemplate> 
       </HierarchicalDataTemplate.ItemTemplate> 
      </HierarchicalDataTemplate> 
     </TreeView.ItemTemplate> 
    </TreeView> 
</Grid> 

Answer 1

あなたは、オブジェクトのコレクションを取り、それらのオブジェクトに基づいて値を返すの多結合コンバータを使用することができるかもしれません。ここに例があります。この例では

public class CheckedAndImageURLMultiValueConverter : IMultiValueConverter 
{ 
    public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture) 
    { 
     var checkboxIsChecked = (bool?)values[0]; 

     ImageSource newImageURL = ...; 

     var imageURL = (ImageSource)values[1]; 

     if (checkboxIsChecked == true) 
     { 
      return newImageURL; 
     } 
     return imageURL; 
    } 

    public object[] ConvertBack(object value, Type[] targetTypes, object parameter, CultureInfo culture) 
    { 
     throw new NotImplementedException(); 
    } 
} 

チェックボックスがチェックされている場合は、一つの画像のソースを取得していない場合は、別のは、これはおそらくあなたが望むものを正確ではない（と私はnewImageSourceの値が含まれていませんでした）うまくいけば、あなた」これをあなたのニーズに適応させることができます。

次に、xamlに参照を追加する必要があります。このようなもの;

<Window.Resources> 
     ... 
     <local:CheckedAndImageURLMultiValueConverter x:Key="AndImageUrlMultiValueConverter"/> 
    </Window.Resources> 

最後に、画像xamlを置き換えて、このようなマルチバインディングを使用する必要があります。

  <Image Grid.Column="2" HorizontalAlignment="Right" Margin="2"> 
      <Image.Source> 
       <MultiBinding Converter="{StaticResource AndImageUrlMultiValueConverter}"> 
        <Binding Path="IsCheckBoxChecked" /> 
        <Binding Path="ImageURL" /> 
       </MultiBinding> 
      </Image.Source> 
     </Image> 

あなたは、あなたが戻ったばかりの複数のコンバーで元の型にオブジェクト値をカーストに結合するもので、非常に柔軟であることができ、コンバータを使用しているので、あなたが必要とするものの論理行い、その後、ベースの値を返しますこれに。

バインディングがxamlで表示される順序に注意してください。マルチコンバーターのobject []値の順序と一致する必要があります。

U自分自身を2つのバインディングに制限する必要はありません。マルチコンバーターはより多くのものにバインドすることができます。

こちらがお役に立てば幸いです。