Question

我正在使用Toolkit for Windows Phone中的ExpanderView。我添加的是每个标题下面的行。我不能做的是可扩展的Headers拉伸线。

<toolkit:ExpanderView x:Name="ev" HorizontalAlignment="Stretch" Margin="0,0,0,8" 
                                        Header="{Binding}"
                                        NonExpandableHeader="{Binding}"
                                        Expander="{Binding}"
                                        ItemsSource="{Binding}"
                                        IsNonExpandable="{Binding HasSingleMessage}">

<toolkit:ExpanderView.HeaderTemplate>
    <DataTemplate>
        <StackPanel>
            <TextBlock Text="{Binding LastMessageReceived.Header}"
            HorizontalAlignment="Stretch"  
            Foreground="Black"
            FontSize="{StaticResource PhoneFontSizeLarge}" 
            FontFamily="{StaticResource PhoneFontFamilySemiLight}"/>
            <Rectangle Height="1" StrokeThickness="0" Fill="Black" Margin="0,8" />
        </StackPanel>
    </DataTemplate>
</toolkit:ExpanderView.HeaderTemplate>

Sample screen with red mark

Answer 1

要深究这一点有点棘手。最重要的是，我认为获得你想要的东西（拉伸线）的唯一方法是在你的XAML资源中包含control template的修改版本，并使标题拉伸以填充其容器。

如果您检查链接上的源代码，并向下滚动到ExpanderView控件模板，您将看到header元素的定义如下：

<ListBoxItem x:Name="ExpandableContent" controls:TiltEffect.IsTiltEnabled="True"
                                     Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="41"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <ContentControl x:Name="Header"
                        HorizontalContentAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        Content="{TemplateBinding Header}"
                        ContentTemplate="{TemplateBinding HeaderTemplate}"
                        Grid.Row="0" Grid.Column="0"
                        Grid.ColumnSpan="2"/>
        <ContentControl x:Name="Expander"                                            
                        Margin="11,0,0,0"
                        Grid.Row="1" Grid.Column="1"
                        HorizontalContentAlignment="Stretch"
                        HorizontalAlignment="Stretch"
                        Content="{TemplateBinding Expander}"
                        ContentTemplate="{TemplateBinding ExpanderTemplate}"/>
        <Grid x:Name="ExpanderPanel" Grid.Row="0" Grid.Column="0" 
              Grid.RowSpan="2" Grid.ColumnSpan="2" Background="Transparent"/>
    </Grid>
</ListBoxItem>

现在，乍一看这看起来很好，因为＆＃34; Header＆＃34; ContentControl将HorizontalAlignment和HorizontalContentAlignment都设置为＆＃34; Stretch＆＃34;。很遗憾，父ListBoxItem未定义其 HorizontalContentAlignment，其默认值可能不是＆＃34;拉伸＆＃34;。（我在这一点上不确定，因为MSDN documentation没有列出默认值 - 但相应属性的默认值为"Left" in WPF和"Center" in Silverlight。）

因此，我会尝试将默认控件模板复制到您的应用程序资源中，并将相应的对齐方式添加到＆＃34; ExpandableContent＆＃34; ListBoxItem中：

<ListBoxItem x:Name="ExpandableContent" 
             HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ...

使用Toolkit for Windows Phone的ExpanderView自定义标题

1 个答案: