在控件模板中使用占位符

本文关键字：占位符 控件 | 更新日期: 2023-09-27 18:34:46

我有许多布局几乎相同的网格。这是一个例子

 <Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="30" />
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="Status wijzigen" Margin="0"/>
      <Image Grid.Column="1" Source="/UserControlSolution;component/Image/user.png" Margin="5" />
 </Grid>

我想在控件模板中将其打开，如下所示：WPF 中网格样式上没有模板属性？

但是，当我使用控件模板时，如何更改文本块文本和图像源？

在控件模板中使用占位符

可以通过创建一个具有文本和源属性的模型来实现此目的。然后，根据要使用此控件模板的不同实例数，可以在网格的标记中设置模型实例。

<local:MyModel x:Key="myModel1" Text="" Source=""/>

<ContentControl Tag="{StaticResource myModel1}" Template={StaticResource myTemplate}>
</ContentControl>

和模板

<ControlTemplate x:Key="myTemplate" TargetType="ContentControl">
<Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="*"/>
         <ColumnDefinition Width="30" />
      </Grid.ColumnDefinitions>
      <TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding Tag.Text, RelativeSource={RelativeSource TemplatedParent}}" Margin="0"/>
      <Image Grid.Column="1" Source="{Binding Tag.Source, RelativeSource={RelativeSource TemplatedParent}}" Margin="5" />
 </Grid>
</ControlTemplate>
据

我所知，您只能使用DataTemplate执行此操作，并且仅当每个数据绑定类都具有相同名称的属性时，在这种情况下，TextValue和ImageSource。我认为您无法直接从ControlTemplate访问数据对象。

<DataTemplate>
    <Grid x:Name="OptionChangeUserState" Grid.Row="0" Style="{StaticResource MenuItemGridStyle}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="30" />
        </Grid.ColumnDefinitions>
        <TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding TextValue}" Margin="0"/>
        <Image Grid.Column="1" Source="{Binding ImageSource}" Margin="5" />
    </Grid>
</DataTemplate>

您还需要改用 ContentTemplate 属性。

<ContentControl Content="{Binding DataObject}" 
    ContentTemplate="{StaticResource Template}" />

这可以通过数据绑定来完成，但最好使用属性接口，以便您可以简单地键入以下内容：

<local:OptionControl Text="Status wijzigen" ImageSource="/UserControlSolution;component/Image/user.png" />

这样，您无需将 UI 标签和图标放在单独的数据层中。

这可以通过创建定义依赖项属性的控件类，并使用模板绑定绑定到控件模板中的它们来实现。

现有控件可能具有可以为其创建模板的相应属性。此 HeaderedContentControl 模板应该适合您，尽管自定义控件会更好：

<Style x:Key="HeaderedContentControlStyle" TargetType="HeaderedContentControl">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="HeaderedContentControl">
                <Grid Style="{StaticResource MenuItemGridStyle}">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="30" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{TemplateBinding Header}" />
                    <Image Grid.Column="1" Source="{TemplateBinding Content}" />
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

用法：

<HeaderedContentControl Name="OptionChangeUserState" Grid.Row="0"
                        Style="{StaticResource HeaderedContentControlStyle}"
                        Header="Status wijzigen">
    <BitmapImage>/UserControlSolution;component/Image/user.png</BitmapImage>
</HeaderedContentControl>

请注意，我们需要将图像路径显式包装在BitmapImage中。这是因为 HeaderedContentControl.Content 属性未声明为图像类型，因此 WPF 不会自动转换它。

将 DataTemplate 与某种 DTO 一起使用，DictionaryEntry 将用于两个项目。

    <DataTemplate DataType="{x:Type Collections:DictionaryEntry}" x:Key="gridTemplate">
        <Grid Style="{StaticResource MenuItemGridStyle}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="30" />
            </Grid.ColumnDefinitions>
            <TextBlock Grid.Column="0" Style="{StaticResource MenuItemTextblockStyle}" Text="{Binding Key}" Margin="0"/>
            <Image Grid.Column="1" Source="{Binding Value}" Margin="5" />
        </Grid>
    </DataTemplate>

用法：

<ContentControl ContentTemplate="{StaticResource gridTemplate}">
<ContentControl.Content>
    <Collections:DictionaryEntry Key="Status wijzigen" Value="/UserControlSolution;component/Image/user.png" />
</ContentControl.Content>

相关文章：