Bindung des untergeordneten Steuerelements in der Baumansicht Element in WPF

Question

Ich habe eine Baumansicht erstellt mit HierarchicalDataTemplate und binded mit benutzerdefinierten Klasse. In treeview untergeordneten Elementen habe ich Kontrollkästchen, Textblock und Bild. Was ich will ist, wenn Checkbox manuell auf der Benutzeroberfläche aktiviert ist, möchte ich mein Bild auf richtige Zeichen ändern. Ich bin nicht in der Lage herauszufinden, wie mache ich das. Unten ist der 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

Sie können einen mehrbindigen Konverter verwenden können, die eine Sammlung von Objekten nimmt und auf diese Objekte einen Wert. Hier ist ein Beispiel;

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(); 
    } 
} 

In diesem Beispiel erhalten Sie eine Bildquelle, wenn das Kontrollkästchen aktiviert ist und ein anderer nicht, wenn, ist dies wahrscheinlich nicht genau das, was Sie wollen (und ich habe keinen Wert für newImageSource enthalten), aber hoffentlich Sie‘ Ich werde es an Ihre Bedürfnisse anpassen können.

Als nächstes müssen Sie einen Verweis darauf in Ihrem XAML hinzufügen. Etwas wie das;

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

Schließlich werden Sie Ihr Bild XAML ersetzen müssen, um die Verwendung des mehrbindigen mit so etwas zu machen;

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

Da Sie einen Konverter verwenden, können Sie sehr flexibel sein mit dem, was Sie binden nur die Objektwerte auf ihre ursprünglichen Typen in der Multikonverter Kaste zurück, tun, was immer Logik, die Sie brauchen, und dann den Wert zurück, basierend darauf.

Seien Sie vorsichtig mit der Reihenfolge, in der Ihre Bindungen in der XAML erscheinen, sie müssen der Reihenfolge der Objekt [] - Werte im multiConverter entsprechen.

U muss sich nicht auf nur zwei Bindungen beschränken. Mit dem Multiconverter können Sie mehr binden.

Ich hoffe, das hilft.