在控制模板中使用佔位符

Question

我有許多具有幾乎相同佈局的網格。這是一個例子

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

我希望把這個在ControlTemplate中喜歡這裏：no template property on grid style in WPF?

但我怎麼可以改變文本塊的文本和圖片來源當我使用的ControlTemplate？

Answer 1

您可以通過創建具有文本和來源屬性的一個模型來實現此目的。然後根據您想要使用此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> 

Answer 2

據我所知，你只能用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}" /> 

Answer 3

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

Answer 4

這可以通過數據綁定來完成，但它是最好使用一個屬性界面，讓您可以簡單地輸入類似：

<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不會自動將其轉換。