控制模板：如何創建綁定

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> 

我有一個下面顯示的對象綁定到我的數據網格。我想將三個屬性綁定到我的工具提示中的三個文本框。

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

在我的DataGrid我下面給我的數據綁定到我的DataGrid

ItemsSource="{Binding TaskList}" 

然後在DataGridTextColumn我綁定屬性像下面

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

這是有道理的我。然而，我不知道如何在創建自定義工具提示時使用綁定。我讀過我可以使用模板綁定。我仍然不明白我的工具提示將如何綁定到我上面的xaml中MyTask類型的對象？

更新 - 希望讓我的問題更清楚

我想知道如何在我的控制模板中的綁定（爲3個文本框），然後在我的代碼的主要部分我怎麼綁定到這些文本框。然後我想知道如何爲我的控件模板的背景顏色創建綁定，我相信這是與relativesource有關的？

當我正在閱讀其他示例（更改模板屬性）時，我看到如下所示的行。我不明白你爲什麼要這樣做？這是否是一種情況，如果你沒有正確處理下面的行，你將無法在Padding屬性上創建綁定？

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

Answer 1

你不需要TemplateBindng，作爲用於產生模板對象設置佈局基於動態使用實現的屬性控制。當需要這種功能時，請參見this CodePlex article。

您只需在ToolTip內設置您的TextBlock元素的綁定即可。在這種情況下，您根本不需要模板，除了因爲您在所有列單元格中使用相同的工具提示，它將幫助您解決問題，因爲您無需複製粘貼相同的代碼三次。您正在閱讀與本文相似的文章Tooltip in DataGrid in WPF。

這將具體工作，你的情況下的解決辦法是這樣的：

<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彈出具有相同DataContext爲活動行中的內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

使用底層DataGridCell背景作爲ToolTip背景，綁定您的Border背景爲Background="{Binding PlacementTarget.Background, RelativeSource={RelativeSource AncestorType=ToolTip, Mode=FindAncestor}}"。

您正試圖顯示單元格工具提示中的所有字段。這沒有意義。但你仍然可以輕鬆地使用

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周的TextBlocks，並且只使用一個如：

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

如果你想顯示所有3字段，然後使用DataGrid.RowStyle將ToolTip應用於DataGridRow。不需要更改代碼。