Пользовательский заголовок с ExpanderView из Toolkit для Windows Phone

Я использую ExpanderView из набора инструментов для Windows Phone. Я добавляю строку под каждым заголовком. Чего я не могу сделать, так это растянуть линию для расширяемых заголовков.

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

Пример экрана с красной меткой


c# xaml silverlight-toolkit windows-phone-7 windows-phone-8
person boski    schedule 14.10.2014    source источник
comment
вы имеете в виду, вам нужно растянуть линию, которая находится под красным кружком, как под Deviation 01 Test?   -  person Kulasangar    schedule 14.10.2014
comment
Я не буду добавлять его в качестве ответа, потому что не знаю, сработает ли он, но попробуйте добавить HorizontalContentAlignment="Stretch" в объявление ExpanderView. Тогда, пожалуйста, дайте мне знать, если это сработало.   -  person meneses.pt    schedule 14.10.2014
comment
Та линия, которая находится на тестировании у Kategorier и Avvik Lager. Теперь он размером с заголовок, но я хотел бы растянуть его на ширину экрана, как в тесте Deviation 01.   -  person boski    schedule 14.10.2014
comment
Добавление HorizontalContentAlignment=Stretch не сработало. Тестовые av Kategorier и Avvik Lager по-прежнему растягиваются до ширины заголовка.   -  person boski    schedule 14.10.2014

Ответы (1)


arrow_upward
3
arrow_downward

Немного сложно докопаться до сути. Суть в том, что я думаю, что единственный способ получить то, что вы хотите (растянуть линию), — это включить модифицированную версию шаблон управления в ваших ресурсах XAML и растяните заголовок, чтобы заполнить его контейнер.

Если вы проверите исходный код по ссылке и прокрутите вниз до шаблона элемента управления ExpanderView, вы увидите, что элемент заголовка определен следующим образом:

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

Теперь, на первый взгляд, это выглядит нормально, потому что ContentControl «Заголовок» имеет как HorizontalAlignment, так и HorizontalContentAlignment значение «Растягивание». К сожалению, родительский элемент ListBoxItem не определяет своего элемента HorizontalContentAlignment, значение которого по умолчанию не может быть "Растягивание". (Я не уверен в этом, потому что документация MSDN не содержит значения по умолчанию, но значением по умолчанию для соответствующего свойства является "Left" в WPF и "Center" в Silverlight.)

Поэтому я бы попытался скопировать шаблон элемента управления по умолчанию в ресурсы вашего приложения и добавить соответствующие выравнивания в ListBoxItem "ExpandableContent":

<ListBoxItem x:Name="ExpandableContent" 
             HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch" ...
person McGarnagle    schedule 14.10.2014
comment
Я получаю копию репозитория с помощью Silverlight Toolkit, затем изменил исходное определение, и все работает хорошо. Мой +1. - person boski; 15.10.2014