控制模板:如何创建绑定

时间:2015-12-18 10:59:44

标签: c# wpf xaml

所以,我有一个数据网格,它根据单元格的值有不同的颜色单元格。

我还有一个显示更多信息的工具提示。一切正常。

但是,我想改变工具提示以显示更多信息,并且还要与单元格颜色相同。所以,我认为为我的工具提示创建自定义样式是明智的。所以,我有以下代码。

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

这对我有意义。然而,在创建自定义工具提示时,我无法看到我如何使用绑定。我读过我可以使用templatebinding。我仍然不明白我的工具提示如何绑定到我上面的xaml中的MyTask类型的对象?

更新 - 希望让我的问题更清晰

我想知道如何在我的控件模板中创建绑定(对于3个文本框),然后在我的代码的主要部分中如何绑定到这些文本框。然后我想知道如何为我的控件模板的背景颜色创建一个绑定,我相信这与relativesource有关吗?

当我阅读其他示例(更改模板属性)时,我会看到如下所示的行。我真的不明白你为什么要这么做?如果您没有在下面的行中行,那么您是否能够在Padding属性上创建绑定?

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

4 个答案:

答案 0 :(得分:9)

您不需要TemplateBindng,因为它用于基于动态使用实现控件的属性将结果模板对象设置为布局。有关何时需要此类功能的一个很好的示例,请参阅this CodePlex article

您只需在TextBlock中设置ToolTip元素的绑定即可。在这种情况下,您根本不需要模板,除非您在所有列单元格中使用相同的工具提示,它将帮助您,因为您不需要复制粘贴相同的代码三次。您正在阅读与本文类似的内容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>

您在ToolTip中设置CellTemplate属性,以便弹出的结果ToolTipDataContext中的有效行具有相同的DataGrid 。这样,您就可以在ToolTip ContentTemplate内正常进行属性绑定,因为它可以访问与DataGrid行相同的所有属性。

答案 1 :(得分:4)

要将基础DataGridCell背景用作ToolTip背景,请将Border背景绑定为Background="{Binding PlacementTarget.Background, RelativeSource={RelativeSource AncestorType=ToolTip, Mode=FindAncestor}}"

您正尝试在单元格的工具提示中显示所有字段。这没有意义。但是你仍然可以使用

轻松完成
  1. PlacementTarget属性,它为您提供基础Visual元素。 ContextMenu,Popup也暴露了这个属性。

  2. PlacementTarget.DataContext将为您提供基础MyTask对象。

  3. PlacementTarget.Content将为您提供相应DataGridCell的内容,在您的情况下它将是TextBlock。

  4. 因此,如果您想在单元格的工具提示中显示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个文本块,并仅使用一个作为:

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

    如果您要显示所有3个字段,请使用ToolTipDataGridRow应用于DataGrid.RowStyle。不需要更改代码。

答案 2 :(得分:2)

如何在MyTask中使用颜色属性?

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

并绑定到color属性:

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

答案 3 :(得分:1)

为什么不选择工具提示的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>

现在,您也可以将属性绑定到textblock。