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

Posted 2023-04-12

【中文标题】来自 Toolkit for Windows Phone 的带有 ExpanderView 的自定义标头

【英文标题】：Custom header with ExpanderView from Toolkit for Windows Phone

【发布时间】：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 一样将它拉伸到屏幕宽度。

添加 Horizo​​ntalContentAlignment="Stretch" 无效。测试 av Kategorier 和 Avvik Lager 仍然拉伸到标题宽度。

【参考方案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。