Проблема заголовка комбинированного списка uwp с редактором тем Fluent xaml - PullRequest
Новая
       46

Проблема заголовка комбинированного списка uwp с редактором тем Fluent xaml

0 голосов
/ 13 марта 2020

Я создал собственный стиль комбинированного поля, в котором рамка обвивается вокруг заголовка, а также самого содержимого поля со списком. Он работал нормально, как и ожидалось, и заголовок показывался нормально, но затем я открыл «Fluent xaml theme editor» (генератор тем uwp из магазина) и оставил его по умолчанию, экспортировал тему в мой app.xaml и теперь заголовок имеет исчез. Ниже приведена ссылка для воспроизведения проблемы, просто откройте проект и запустите его, и вы увидите, что как на светлой, так и на темной темах в выпадающем списке нет заголовка.

Воспроизвести проект проблемы: https://github.com/touseefbsb/ComboBoxThemeIssue

Минимальная цель: 1803

Целевая SDK: 1809/1903 (1809 показывает заголовок только в темной теме, 1903 не показывает заголовок в обеих темах)

Выход

image

image

Код

MainPage 

<Pivot>
        <PivotItem Header="Dropdowns">
            <PivotItem.Resources>
                <DataTemplate x:Key="dropdowns">
                    <StackPanel Background="{ThemeResource SystemAltHighColor}">
                        <ComboBox Header="Header">
                            <ComboBoxItem>123</ComboBoxItem>
                            <ComboBoxItem>456</ComboBoxItem>
                            <ComboBoxItem>789</ComboBoxItem>
                        </ComboBox>
                    </StackPanel>
                </DataTemplate>
            </PivotItem.Resources>
            <Pivot>
                <PivotItem Header="Light" RequestedTheme="Light">
                    <ContentControl ContentTemplate="{StaticResource dropdowns}" />
                </PivotItem>
                <PivotItem Header="Dark" RequestedTheme="Dark">
                    <ContentControl ContentTemplate="{StaticResource dropdowns}" />
                </PivotItem>
            </Pivot>
        </PivotItem>
    </Pivot>

App.xaml

(https://github.com/touseefbsb/ComboBoxThemeIssue/blob/master/ComboBoxThemeIssue/ComboBoxThemeIssue/App.xaml)

Обновление 1

В ходе дальнейшего расследования я обнаружил, что удаление «AltMediumLow» из тега colorpelleteResources устраняет проблему, но это очень странно, поскольку ее не следует удалять, поскольку она является частью сгенерированной по умолчанию темы с помощью редактора тем.

enter image description here

1 Ответ

1 голос
/ 16 марта 2020

В HeaderedComboBoxStyle в App.xaml созданный редактор темы Fluent xaml определяет только две строки для таблицы и позволяет границе с именем Background занимать две строки, поэтому заголовок Border будет скрыт. Кроме того, он также устанавливает видимость заголовка как Свернутый , чтобы скрыть его. Но в стиле ComboBox по умолчанию он устанавливает три строки, помещает заголовок в первую строку, а Boder - во вторую и третью строку. Таким образом, вы можете изменить его, как стиль по умолчанию, например:

App.xaml: 

......
<ControlTemplate TargetType="ComboBox">
    <Grid x:Name="LayoutRoot">
        ......
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*" />
            <ColumnDefinition Width="32" />
         </Grid.ColumnDefinitions>

         <ContentPresenter  x:Name="HeaderContentPresenter"
                            Margin="{ThemeResource ComboBoxHeaderThemeMargin}"
                            x:DeferLoadStrategy="Lazy"
                            Content="{TemplateBinding Header}"
                            ContentTemplate="{TemplateBinding HeaderTemplate}"
                            FlowDirection="{TemplateBinding FlowDirection}"
                            FontWeight="{ThemeResource ComboBoxHeaderThemeFontWeight}"
                            Visibility="Visible" />
         <Border x:Name="Background"
                 Grid.RowSpan="2"
                 Grid.ColumnSpan="2"
                 Background="{TemplateBinding Background}"
                 BorderBrush="{TemplateBinding BorderBrush}"
                 BorderThickness="{TemplateBinding BorderThickness}"
                 Control.IsTemplateFocusTarget="True" />
         ......
     </Grid>
 </ControlTemplate>

Обновление:

На основе HeaderedComboBoxStyle в App.xaml фон рамки с именем «Background» templateBinding Background, а свойство Background связывается с ComboBoxBackground.

Выбрав ComboBoxBackground и нажмите F12, вы перейдете в файл generi c .xaml , затем вы увидите, что ComboBoxBackground связан с SystemControlBackgroundAltMediumLowBru sh и фактически с цветом SystemControlBowgroundA sh равно SystemAltMediumLowColor's. И в этом случае AltMediumLow из colorPelleteResources представляет SystemAltMediumLowColor. Таким образом, на самом деле свойство Background связывается с AltMediumLow.

Когда AltMediumLow устанавливает белый цвет в теме «Свет», фон границы становится белым и закрывает заголовок, поэтому заголовок не может отображаться. Вы можете удалить Фон Границы или установить его как Прозрачный, не удаляя AltMediumLow.

А когда вы удаляете «AltMediumLow» из тега colorpelleteResources, цвет AltMediumLow будет установлен Прозрачным по умолчанию, поэтому Фон Границы Также прозрачно, заголовок будет отображаться. 

<Border
        x:Name="Background"
        Grid.RowSpan="2"
        Grid.ColumnSpan="2"
        Background="Transparent"
        BorderBrush="{TemplateBinding BorderBrush}"
        BorderThickness="{TemplateBinding BorderThickness}"
        Control.IsTemplateFocusTarget="True" />
...