TreeView中子控件的綁定WPF中的項目

我使用HierarchicalDataTemplate創建了一個樹視圖，並使用自定義類綁定了該樹視圖。在樹視圖子項中，我有複選框，文本塊和圖像。我想要的是每當複選框在UI上手動檢查時，我希望我的圖像更改爲正確的標誌。我無法弄清楚如何做到這一點。以下是XAML。TreeView中子控件的綁定WPF中的項目

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

來源

2016-04-23 Hemil

你也許能夠使用multibinding轉換器需要的對象的集合，並返回基於這些對象的值。這是一個例子;

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中出現的順序，它們需要匹配multiConverter中對象[]值的順序。

你不必限制自己只有兩個綁定。 multiconverter讓你綁定更多。

我希望這會有所幫助。

來源

2016-04-23 14:54:52

謝謝我設法讓它通過這個工作。 – Hemil

很高興你有事情的工作。如果您認爲這是答案，您可以將其標記爲答案。謝謝。 –

TreeView中子控件的綁定WPF中的項目

回答

相關問題