0

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

 <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 中网格样式上没有模板属性？

但是，当我使用 controltemplate 时，如何更改 Textblock 文本和图像源？

4

4 回答 4

2

您可以通过创建一个具有 Text 和 Source 属性的模型来实现这一点。然后根据您要使用此 ControlTemplate 的不同实例数量，您可以在网格的标记中设置模型实例。

<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>
于 2013-10-09T12:22:49.100 回答
1

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

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

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

这可以通过创建一个定义Dependency Properties的控件类并使用TemplateBindings在 ControlTemplate 中绑定到它们来实现。

现有控件可能具有您可以为其创建模板的适当属性。这个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 不会自动对其进行转换。

于 2013-10-09T12:59:32.557 回答
1

据我所知，您只能使用 aDataTemplate并且仅当您的每个数据绑定类都具有相同名称的属性（在本例中为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}" />
于 2013-10-09T12:23:10.167 回答
0

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

于 2013-10-09T12:25:00.993 回答