TreeViewItemラップの一部を作成する

Question

TreeViewItemには、アイコン、ヘッダー、およびデータの部分が複数含まれています。私は最後の部分を包み込むことなく包み込むようにしようとしています、そして、私は運がないです。ここでは、問題の実例です：

私は運で、私はスタックオーバーフローで見つけたいくつかのことを試してみました。

1. がTreeViewの実際の幅に結合して列にグリッドにアイテムを入れて：私が見つけた3件の提案がありました。これは以下のXAMLで実装されていますが、役立たないようです。

2. の水平スクロールを無効にします。これは、ScrollViewer.HorizontalScrollBarVisibility = "Disabled"で行いました。これも下のXAMLで実装しました。

3. WrapPanelで必要なものをラップします。私はこれを試みたが、結果が悪かった。私が全体でTreeViewItemを包み込むと、コントロールするのが難しいラッピングができました（アイテム全体がラップされるので、すべての部分がラップされ、ひどいです）。私がちょうど所望のTextBlockを1つに包んだとき、私は全く結果を得ませんでした。だから私はそれを取り出した。ここでは、レイアウトの実例だ

   <DataTemplate x:Key="BasicPropertyTemplate" DataType="{x:Type json:JProperty}"> 
       <Grid> 
        <Grid.ColumnDefinitions> 
         <ColumnDefinition Width="{Binding RelativeSource={RelativeSource AncestorType=TreeView}, Path=ActualWidth}" /> 
        </Grid.ColumnDefinitions> 
        <Grid> 
         <Grid.ColumnDefinitions> 
          <ColumnDefinition Width="16" /> 
          <ColumnDefinition Width="3" /> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="3" /> 
          <ColumnDefinition Width="Auto" /> 
          <ColumnDefinition Width="3" /> 
          <ColumnDefinition Width="Auto" /> 
         </Grid.ColumnDefinitions> 
         <Border 
          Width="12" 
          Height="12" 
          HorizontalAlignment="Center" 
          VerticalAlignment="Center" 
          Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}" 
          BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}" 
          BorderThickness="1" /> 
         <TextBlock Grid.Column="2" Text="{Binding Name, Mode=OneWay}" /> 
         <TextBlock Grid.Column="4" Text=": " /> 
         <TextBlock 
          Grid.Column="6" 
          Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}" 
          TextWrapping="Wrap" /> 
        </Grid> 
       </Grid> 
   </DataTemplate> 
   

   ので、あなたはTreeViewItemが構成されてどのように見ることができます：ここで

は、私が TreeViewItemのために持っているテンプレートの基本的

、灰色部分はアイコン、緑色部分は項目間のスペーサ、青色部分はヘッダーとコロン（eこの質問に関するものとは無関係です）、赤い部分は実際の内容です。

私はラップしたい部分です。

が

ここTreeView定義があります：

<TreeView 
    x:Name="JsonRoot" 
    Grid.Column="0" 
    ItemTemplateSelector="{StaticResource TreeViewTemplateSelector}" 
    Loaded="JsonRoot_Loaded" 
    ScrollViewer.HorizontalScrollBarVisibility="Disabled" 
    VirtualizingStackPanel.IsVirtualizing="True" /> 

私が何かシンプル間違ってやっているように感じるが、私はよく分かりません。 TextBlockの幅を200などの任意の値に固定するだけで、これを達成する方法はありますか？

Answer 1

私の調査によると、TextBlock Wrapは<ColumnDefinition Width="Auto"/>では機能しません。そこで、DataTemplateの最後の<ColumnDefinition Width="Auto"/>を<ColumnDefinition Width="*"/>に変更しました。

残念ながら、TreeViewItem（TreeViewアイテムのデフォルトコンテナ）は、テンプレートに<ColumnDefinition Width="Auto"/>を持ち、ここにアイテムを配置します。 <ColumnDefinition Width="*"/>でカスタムテンプレートを作成しようとしましたが、それは機能しましたが、コードは実際には長すぎます。だから私は、グリッド幅を結合することによって効果を補償することを決めた：

<DataTemplate x:Key="BasicPropertyTemplate" DataType="{x:Type json:JProperty}"> 
    <Grid Width="{Binding RelativeSource={RelativeSource AncestorType=TreeViewItem}, Path=ActualWidth}" > 
     <Grid Margin="0,0,20,0"> <!--right margin to compensate excessive width--> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="16" /> 
       <ColumnDefinition Width="3" /> 
       <ColumnDefinition Width="Auto" /> 
       <ColumnDefinition Width="3" /> 
       <ColumnDefinition Width="Auto"/> 
       <ColumnDefinition Width="3" /> 
       <ColumnDefinition Width="*"/> <!--was Auto--> 
      </Grid.ColumnDefinitions> 
     <Border 
      Width="12" 
      Height="12" 
      HorizontalAlignment="Center" 
      VerticalAlignment="Center" 
      Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}" 
      BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}" 
      BorderThickness="1" /> 
     <TextBlock Grid.Column="2" Text="{Binding Name, Mode=OneWay}" /> 
     <TextBlock Grid.Column="4" Text=": " /> 
     <TextBlock 
      Grid.Column="6" 
      Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}" 
      TextWrapping="Wrap" /> 
     </Grid> 
    </Grid> 
</DataTemplate> 

ScrollViewer.HorizontalScrollBarVisibility="Disabled"は重要な要素であると設定する必要があります。

Answer 2

は、DockPanelとのDataTemplateでグリッドを変更してみてください：

<DataTemplate> 
    <DockPanel> 
     <Border Width="12" 
       Height="12" 
       HorizontalAlignment="Center" 
       VerticalAlignment="Center" 
       Background="{Binding Converter={StaticResource TypeToColorConverter}, ConverterParameter='Interior'}" 
       BorderBrush="{Binding Converter={StaticResource TypeToColorConverter}}" 
       BorderThickness="1" /> 
     <TextBlock Text="{Binding Name, Mode=OneWay}" /> 
     <TextBlock Text=": " /> 
     <TextBlock Text="{Binding Value, Converter={StaticResource StringFormatConverter}, Mode=OneWay}" 
       TextWrapping="Wrap" /> 
    </DockPanel> 
</DataTemplate>