Изменить шаблон выбора ListViewMode - PullRequest
Новая
       18

Изменить шаблон выбора ListViewMode

0 голосов
/ 06 мая 2019

Я хотел бы изменить шаблон флажка, который отображается, когда выбрано SelectionMode = Multiple в ListView в UWP. Я не хочу флажок, но пользовательский интерфейс. Мое приложение меняется с SelectionMode = None на SelectionMode = Multiple и обратно, я бы хотел сохранить скользящую анимацию. Мой список показывает элементы с суммами, и при выборе я хочу выбрать сумму, а не флажок. Изображение должно визуализировать мою идею: Скриншот Нужно ли создавать это вручную, связывая с Visibility? Как создать «скользящую» анимацию в таком случае?

С уважением, user3650130

1 Ответ

0 голосов
/ 07 мая 2019

Я отредактирую ответ, чтобы завершить его позже.В настоящее время я поделюсь первым.

На самом деле вы можете найти файл generic.xaml в (Program Files) \ Windows Kits \ 10 \ DesignTime \ CommonConfiguration \ Neutral \ UAP \\ Папка общего назначения
Где вы увидитеListviewItem sytle с x: key = "ListViewItemExpanded", этот файл будет использоваться позже.

И в вашем коде, скажем, если у вас есть просмотр списка, вы можете поместить вышеупомянутый стиль в свой itemcontainerstyle, что-то вроде: 

 <ListView  SelectionMode="Multiple">
        <ListView.ItemContainerStyle>
            <Style TargetType="ListViewItem">
                <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
                <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
                <Setter Property="BorderBrush" Value="{x:Null}" />
                <Setter Property="BorderThickness" Value="0" />
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="IsHoldingEnabled" Value="True" />
                <Setter Property="Padding" Value="12,0,12,0" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="VerticalContentAlignment" Value="Center" />
                <Setter Property="MinWidth" Value="{ThemeResource ListViewItemMinWidth}" />
                <Setter Property="MinHeight" Value="{ThemeResource ListViewItemMinHeight}" />
                <Setter Property="AllowDrop" Value="False" />
                <Setter Property="UseSystemFocusVisuals" Value="{StaticResource UseSystemFocusVisuals}" />
                <Setter Property="FocusVisualMargin" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListViewItem">
                            <Grid>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="80"/>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <ComboBox Grid.Column="0">
                                    <x:String>1</x:String>
                                    <x:String>2</x:String>
                                </ComboBox>
                                <ContentPresenter Grid.Column="1"/>
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </ListView.ItemContainerStyle>

        <x:String>1</x:String>
        <x:String>2</x:String>
        <x:String>3</x:String>
        <x:String>4</x:String>
        <x:String>5</x:String>
        <x:String>6</x:String>
    </ListView>

Вы увидите, что можете видеть только свой контент, верно?Актуальная проблема здесь связана с MultiSelectSquare , граница которой является фонтиком в стиле, он контролирует поведение флажка здесь.Нам нужно удалить его и поставить комбокс там.Но это вызовет исключение, так как целью трансформации / анимации является эта граница.Нам нужно изменить его, чтобы он работал.Сначала вы можете начать с этого направления.

Я изменил свой код выше и добавил следующую строку в шаблон управления: 

                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="80"/>
                                <ColumnDefinition Width="*"/>
                            </Grid.ColumnDefinitions>
                            <ComboBox Grid.Column="0">
                                <x:String>1</x:String>
                                <x:String>2</x:String>
                            </ComboBox>
                            <ContentPresenter Grid.Column="1"/>
                        </Grid>

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

ОК.Итак, теперь вы понимаете, что является ключевым моментом.Затем нам нужно перейти к шаблону по умолчанию, ищите ресурс ListViewItemExpanded в файле generic.xaml.Заметьте границу, которая называется "MultiSelectSquare"?Есть четыре вещи, которые связаны с анимацией: «MultiSelectSquare» «MultiSelectClipTransform» «MultiSelectCheckBoxTransform» «MultiSelectCheck».Простая демонстрация похожа на замену FontIcon на Combobox, но оставьте MultiSelectCheck в качестве имени Combobox.Затем удалите любую анимацию в visualstategroup о MultiSelectCheck.Вы увидите, хотя это флажок, показывающий, что когда вы щелкаете по нему, на самом деле это всплывающее окно.

Но для сложной демонстрации вы должны написать собственную анимацию для каждого состояния.

...