来自 Toolkit for Windows Phone 的带有 ExpanderView 的自定义标头答案

【问题标题】：Custom header with ExpanderView from Toolkit for Windows Phone来自 Toolkit for Windows Phone 的带有 ExpanderView 的自定义标头
【发布时间】：2014-12-09 08:59:56
【问题描述】：

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

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

【问题讨论】：

你的意思是，你必须把红圈下面的线拉到Deviation 01 Test下面吗？
我不会添加它作为答案，因为我不知道它是否会起作用，但尝试在 ExpanderView 声明中添加HorizontalContentAlignment="Stretch"。那么请让我知道它是否有效。
Test av Kategorier 和 Avvik Lager 下的那一行。现在它和标题一样大，但我想像 Deviation 01 Test 一样将它拉伸到屏幕宽度。
添加 HorizontalContentAlignment="Stretch" 无效。测试 av Kategorier 和 Avvik Lager 仍然拉伸到标题宽度。

标签： c# xaml windows-phone-7 windows-phone-8 silverlight-toolkit

【解决方案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>

现在，乍一看这看起来不错，因为“Header”ContentControl 将HorizontalAlignment 和HorizontalContentAlignment 都设置为“Stretch”。不幸的是，父 ListBoxItem 没有定义 its HorizontalContentAlignment，其默认值可能不是“Stretch”。（我不确定这一点，因为MSDN documentation 没有列出默认值——但相应属性的默认值是"Left" in WPF 和"Center" in Silverlight。）

所以我会尝试将默认控件模板复制到您的应用程序资源中，并将适当的对齐方式添加到“ExpandableContent”ListBoxItem：

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

【讨论】：

我使用 Silverlight Toolkit 获得了存储库的副本，然后更改了源定义，它运行良好。我的 +1。