2010-01-20 45 views
2

我有一个名为SpecialExpander的自定义扩展控件。它基本上只是一个标准的Expander与一个花哨的头和一些属性(HeaderTextIsMarkedRead)。将ContentControl *放入WPF DataTemplate中?

我开始通过创建一个简单的类:

public class SpecialExpander : Expander 
{ 
    public string HeaderText { get; set; } 
    public bool IsMarkedRead { get; set; } 
} 

然后,我创建了一个设置在膨胀机(例如,边距,填充等),更重要的几个属性的样式,它还定义了自定义DataTemplateHeaderTemplate属性。该模板基本上是一个两行的网格。

如下面图所示...

  • 的顶行,我想有固定的布局(它总是TextBlockTextBlockCheckBox
  • 的底部行,但是,我想能够为每个扩展器提供定制的XAML。

我试着把<ContentControl Grid.Row="1" ... />放在DataTemplate中,但我无法弄清楚如何正确连接它。


alt text http://img85.imageshack.us/img85/1194/contentcontrolwithintem.jpg


alt text http://img29.imageshack.us/img29/1194/contentcontrolwithintem.jpg


问题

如何建立一个DataTemplateSpecialExpander使头部具有索姆e固定内容(顶行)和自定义内容的占位符(底行)?

对于第二个例子,我希望能够做这样的事情:

<SpecialExpander HeaderText="<Expander Header Text>" IsMarkedRead="True"> 
    <SpecialExpander.Header> 
     <StackPanel Orientation="Horizontal"> 
      <RadioButton Content="High" /> 
      <RadioButton Content="Med" /> 
      <RadioButton Content="Low" /> 
     </StackPanel> 
    <SpecialExpander.Header> 
    <Grid> 
     <Label>Main Content Goes Here</Label> 
    </Grid> 
</SpecialExpander> 

回答

1

今天早上打我如何解决这个问题:而不是建立一个SpecialExpander,我只需要一个正常的Expander 。然后,对于标题,我将使用名为SpecialExpanderHeader的自定义ContentControl

这是它的工作原理...

SpecialExpanderHeader类:

public class SpecialExpanderHeader : ContentControl 
{ 
    public string HeaderText { get; set; } 
    public bool IsMarkedRead { get; set; } 
} 

SpecialExpanderHeader风格:

<Style TargetType="custom:SpecialExpanderHeader"> 
    <Setter Property="Padding" Value="10" /> 
    <Setter Property="Template"> 
     <Setter.Value> 
      <ControlTemplate TargetType="custom:SpecialExpanderHeader"> 
       <Grid> 
        <Grid.RowDefinitions> 
         <RowDefinition Height="Auto" /> 
         <RowDefinition Height="5" /> 
         <RowDefinition Height="Auto" /> 
        </Grid.RowDefinitions> 
        <StackPanel Grid.Row="0" Orientation="Horizontal"> 
         <TextBlock Text="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=custom:SpecialExpanderHeader}, Path=HeaderText}" /> 
         <CheckBox Margin="100,0,0,0" IsChecked="{Binding RelativeSource={RelativeSource FindAncestor, AncestorType=custom:SpecialExpanderHeader}, Path=IsMarkedRead}" /> 
        </StackPanel> 
        <Separator Grid.Row="1" /> 
        <ContentPresenter Grid.Row="2" /> 
       </Grid> 
      </ControlTemplate> 
     </Setter.Value> 
    </Setter> 
</Style> 

扩展风格

<Style x:Key="Local_ExpanderStyle" TargetType="Expander" BasedOn="{StaticResource {x:Type Expander}}"> 
    <Setter Property="Margin" Value="0,0,0,10" /> 
    <Setter Property="Padding" Value="10" /> 
    <Setter Property="FontSize" Value="12" /> 
</Style> 

使用

<Expander Style="{StaticResource Local_ExpanderStyle}"> 
    <Expander.Header> 
     <custom:SpecialExpanderHeader IsMarkedRead="True" HeaderText="Test"> 
      <StackPanel Orientation="Horizontal"> 
       <RadioButton Content="High" /> 
       <RadioButton Content="Medium" /> 
       <RadioButton Content="Low" /> 
      </StackPanel> 
     </custom:SpecialExpanderHeader> 
    </Expander.Header> 
    <Grid> 
     <!-- main expander content goes here --> 
    </Grid> 
</Expander> 
+0

我喜欢它,当发生这种情况:) – 2010-01-20 22:48:02

+0

嗨,如果它是确定你的话,你可以跟我们分享这个示例应用程序,请让每个人都能享受的代码? – SharpUrBrain 2010-12-03 06:42:12