コントロールテンプレート：バインディングを作成する方法

Question

私はセルの値に応じて異なる色のセルを持つデータグリッドを持っています。

さらに詳しい情報を表示するツールチップがあります。これはすべて正常に動作します。

しかし、詳しい情報を表示し、セルと同じ色になるようにツールチップを変更したいと考えています。だから、私はツールチップのカスタムスタイルを作ることが賢明だと思った。だから、私は以下のコードを持っています。

<Style TargetType="ToolTip"> 
    <Setter Property="Template"> 
    <Setter.Value> 
     <ControlTemplate TargetType="ToolTip"> 
      <Border CornerRadius="15,15,15,15" 
        BorderThickness="3,3,3,3" 
        Background="#AA000000" 
        BorderBrush="#99FFFFFF" 
        RenderTransformOrigin="0.5,0.5"> 
        <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="2*"/> 
         <RowDefinition/> 
         <RowDefinition/> 
        </Grid.RowDefinitions> 
        <TextBlock Grid.Row="0"/> 
         <TextBlock Grid.Row="1"/> 
         <TextBlock Grid.Row="2"/> 
        </Grid> 
      </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

私のデータグリッドにバインドされている以下のオブジェクトがあります。私は私のツールチップの3つのテキストボックスに3つのプロパティをバインドしたい。私のDataGrid内

class MyTask 
{ 
    public string Name; 
    public int Code; 
    public string Description; 
} 

私は、これは理にかなって

DataGridTextColumn Header="Code" Binding="{Binding Code}" 

の下のようなプロパティにバインドDataGridTextColumnに

ItemsSource="{Binding TaskList}" 

その後、私のデータグリッドに自分のデータをバインドするには、以下のん私。私はカスタムツールチップを作成する際にバインディングをどのように使用するかを見失うことになります。私はテンプレートバインディングを使用できることを読んだ。上記のxamlのMyTask型のオブジェクトにツールチップがどのようにバインドされるのかまだ分かりません。

アップデート - うまくいけば私の質問をより明確に

私は（3つのテキストボックス用）私のコントロールテンプレートでバインディングを作成する方法を知りたい、その後、私のコードの主要な部分で、私はこれらと結合する方法テキストボックス。私は私のコントロールテンプレートの背景色のバインディングを作成する方法を知りたいと思いますが、これは親戚ソースと関係していると思いますか？

私が他の例（Templateプロパティを変更）を読んでいるとき、私は以下のような行を見ています。なぜあなたはそれをやらなければならないのか本当に分かりません。下の行を正しく読み込めなかった場合、Paddingプロパティでバインディングを作成できないでしょうか？

<Border Padding="{Binding Padding}" ...> 

Answer 1

それを動的に実現するためのプロパティを使用することに基づいてレイアウトに結果のテンプレートオブジェクトを設定するために使用されるあなたは、TemplateBindngを必要としませんコントロール。このような機能が必要な場合の良い例は、this CodePlex articleを参照してください。

TextBlock要素のバインディングをToolTipに設定するだけで済みます。すべての列セルで同じツールヒントを使用しているため、同じコードを3回コピー＆ペーストする必要がないので、テンプレートチップは必要ありません。あなたはこの記事のようなものの後ろにある、Tooltip in DataGrid in WPFです。あなたのケースに特異的に働くだろう

ソリューションは次のようになります：ポップアップ表示結果ToolTipがでアクティブ行と同じDataContextを持つように

<DataGrid Name="TestGrid1" AutoGenerateColumns="False"> 
    <DataGrid.Columns> 
     <DataGridTemplateColumn Header="Name"> 
      <DataGridTemplateColumn.CellTemplate> 
       <DataTemplate> 
        <TextBlock Text="{Binding Name}"> 
         <TextBlock.ToolTip> 
          <ToolTip /> 
         </TextBlock.ToolTip> 
        </TextBlock> 
       </DataTemplate> 
      </DataGridTemplateColumn.CellTemplate> 
     </DataGridTemplateColumn> 
     <DataGridTemplateColumn Header="Code"> 
      <DataGridTemplateColumn.CellTemplate> 
       <DataTemplate> 
        <TextBlock Text="{Binding Code}"> 
         <TextBlock.ToolTip> 
          <ToolTip /> 
         </TextBlock.ToolTip> 
        </TextBlock> 
       </DataTemplate> 
      </DataGridTemplateColumn.CellTemplate> 
     </DataGridTemplateColumn> 
     <DataGridTemplateColumn Header="Description"> 
      <DataGridTemplateColumn.CellTemplate> 
       <DataTemplate> 
        <TextBlock Text="{Binding Description}"> 
         <TextBlock.ToolTip> 
          <ToolTip /> 
         </TextBlock.ToolTip> 
        </TextBlock> 
       </DataTemplate> 
      </DataGridTemplateColumn.CellTemplate> 
     </DataGridTemplateColumn> 
    </DataGrid.Columns> 
    <DataGrid.Resources> 
     <Style TargetType="ToolTip"> 
      <Setter Property="Template"> 
       <Setter.Value> 
        <ControlTemplate TargetType="ToolTip"> 
         <Border CornerRadius="15,15,15,15" 
           BorderThickness="3,3,3,3" 
           Background="#AA000000" 
           BorderBrush="#99FFFFFF" 
           RenderTransformOrigin="0.5,0.5"> 
          <Grid> 
           <Grid.RowDefinitions> 
            <RowDefinition Height="2*"/> 
            <RowDefinition/> 
            <RowDefinition/> 
           </Grid.RowDefinitions> 
           <TextBlock Grid.Row="0" Text="{Binding Name}"/> 
           <TextBlock Grid.Row="1" Text="{Binding Code}"/> 
           <TextBlock Grid.Row="2" Text="{Binding Description}"/> 
          </Grid> 
         </Border> 
        </ControlTemplate> 
       </Setter.Value> 
      </Setter> 
     </Style> 
    </DataGrid.Resources> 
</DataGrid> 

あなたはCellTemplate内ToolTipプロパティを設定しますDataGrid。この方法では、ToolTipContentTemplate内の通常のプロパティバインディングを行うことができます。これは、その行のDataGridと同じプロパティにアクセスできるためです。

Answer 2

キーチップのように、ツールチップのDataTemplateに移動して、セルツールのヒントスタイルで適用するのはなぜですか。

<Style TargetType="ToolTip" x:Key="ToolTipStyle"> 
    <Setter Property="ContentTemplate"> 
    <Setter.Value> 
     <DataTemplate TargetType="ToolTip"> 
      <Border CornerRadius="15,15,15,15" 
        BorderThickness="3,3,3,3" 
        Background="#AA000000" 
        BorderBrush="#99FFFFFF" 
        RenderTransformOrigin="0.5,0.5"> 
        <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="2*"/> 
         <RowDefinition/> 
         <RowDefinition/> 
        </Grid.RowDefinitions> 
        <TextBlock Grid.Row="0"/> 
         <TextBlock Grid.Row="1"/> 
         <TextBlock Grid.Row="2"/> 
        </Grid> 
      </Border> 
      </DataTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

これでプロパティをテキストブロックにバインドすることができます。

Answer 3

MyTaskでカラープロパティを使用するとどうなりますか？

class MyTask 
{ 
    public string Name { get; set; } 
    public int Code { get; set; } 
    public string Description { get; set; } 
    public SolidColorBrush Color { get; set; } 
} 

と色プロパティにバインド：

<Style TargetType="ToolTip"> 
    <Setter Property="OverridesDefaultStyle" Value="true"/> 
    <Setter Property="HasDropShadow" Value="True"/> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="ToolTip"> 
       <Border Name="Border" Background="{Binding Color}" BorderBrush="{StaticResource SolidBorderBrush}" BorderThickness="1" Width="{TemplateBinding Width}" Height="{TemplateBinding Height}"> 
        <StackPanel> 
         <TextBlock Text="{Binding Name}" /> 
         <TextBlock Text="{Binding Code}" /> 
         <TextBlock Text="{Binding Description}" /> 
        </StackPanel> 
       </Border> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

Answer 4

Background="{Binding PlacementTarget.Background, RelativeSource={RelativeSource AncestorType=ToolTip, Mode=FindAncestor}}"としてあなたBorder背景を結合し、ToolTip背景として、基礎となるDataGridCell背景を使用するには。

セルのツールチップにすべてのフィールドを表示しようとしています。それは意味をなさない。しかし、それでもあなたは基本的なVisual要素を与える

1. PlacementTargetプロパティを使用して簡単に行うことができます。 ContextMenu、Popupもこのプロパティを公開します。

2. PlacementTarget.DataContextは、基礎となるMyTaskオブジェクトを提供します。

3. PlacementTarget.Contentは、対応するDataGridCellのコンテンツを提供します。あなたのケースでは、TextBlockになります。

したがって、セルのツールチップに3つのフィールドを表示する場合は、上記のポイント2を使用する次のコードを使用できます。

<DataGrid.CellStyle> 
    <Style TargetType="DataGridCell"> 
     <Setter Property="Background" Value="Tomato"/> 
     <Setter Property="ToolTip"> 
      <Setter.Value> 
       <ToolTip> 
        <ToolTip.Style> 
         <Style TargetType="ToolTip"> 
          <Setter Property="Template"> 
           <Setter.Value> 
            <ControlTemplate TargetType="ToolTip"> 
             <Border CornerRadius="15,15,15,15" 
                BorderThickness="3,3,3,3" 
                Background="{Binding PlacementTarget.Background, RelativeSource={RelativeSource AncestorType=ToolTip, Mode=FindAncestor}}" 
                BorderBrush="#99FFFFFF" 
                RenderTransformOrigin="0.5,0.5"> 
              <Grid> 
               <Grid.RowDefinitions> 
                <RowDefinition Height="2*"/> 
                <RowDefinition/> 
                <RowDefinition/> 
               </Grid.RowDefinitions> 
               <TextBlock Grid.Row="0" Text="{Binding PlacementTarget.DataContext.Name, RelativeSource={RelativeSource AncestorType=ToolTip, Mode=FindAncestor}}" 
                 /> 
               <TextBlock Grid.Row="0" Text="{Binding PlacementTarget.DataContext.Code, RelativeSource={RelativeSource AncestorType=ToolTip, Mode=FindAncestor}}" 
                 /> 
               <TextBlock Grid.Row="0" Text="{Binding PlacementTarget.DataContext.Description, RelativeSource={RelativeSource AncestorType=ToolTip, Mode=FindAncestor}}" 
                 /> 
              </Grid> 
             </Border> 
            </ControlTemplate> 
           </Setter.Value> 
          </Setter> 
         </Style> 
        </ToolTip.Style> 

       </ToolTip> 
      </Setter.Value> 
     </Setter> 
    </Style> 
    </DataGrid.CellStyle> 

そして、あなただけのセルのツールチップにセルのフィールドを対応する表示したい場合は、残りの2つのテキストブロックを削除し、として一つだけを使用します。あなたはすべての3を表示したい場合は

<TextBlock Text="{Binding PlacementTarget.Content.Text, RelativeSource={RelativeSource AncestorType=ToolTip, Mode=FindAncestor}}" /> 

フィールドを入力し、を使用してToolTipをDataGridRowに適用します。コードの変更は必要ありません。