Кнопка переключения пользовательской панели UWP XAML - PullRequest
Новая
       83

Кнопка переключения пользовательской панели UWP XAML

0 голосов
/ 02 мая 2020

Я пытаюсь создать пользовательский AppBarToggleButton для CommandBar, который будет реагировать как кнопка избранное / не избранное , используя только XAML ThemeResource. Я хочу изменить значок с OutlineStart на SolidStar и метку кнопки с Favorite на Unfavorite, как показано на скриншоте ниже. Точный результат, которого я хочу достичь, находится здесь .

Вот код, стоящий за этим: Github Gist

Моя проблема в том, что пока этот код отлично работает в приложении XAML Studio , выбрасывает Uncaught exception в сообществе Visual Studio 2017 . Он также отлично работает в Visual Studio конструктор.

Я знаю, что могу добиться того же с помощью кода, подобного 

private void ToggleFavorite_Checked(object sender, RoutedEventArgs e) {
    ToggleFavorite.Text = "Unfavorite";
    ToggleFavorite.Icon = new SymbolIcon(Symbol.SolidStar);
}
private void ToggleFavorite_Unchecked(object sender, RoutedEventArgs e) {
    ToggleFavorite.Text = "Favorite";
    ToggleFavorite.Icon = new SymbolIcon(Symbol.OutlineStar);
}

, но это не то, что я хочу, я заинтересован в настройке XAML и хочу сделать это именно из XAML стиль.

Что я могу сделать, чтобы она работала в Visual Studio 2017 ?

РЕДАКТИРОВАТЬ (05.03.2020) : После пересмотра моего кода я заметил, что Visual Studio выделяет эту строку как ошибку 

<Setter Target="Content.Foreground" Value="{ThemeResource AppBarToggleButtonForegroundPointerOver}"/>

Это произошло потому, что я изменил имя ContentPresenter с Content на ViewboxContentPresenter здесь 

<Viewbox x:Name="ContentViewbox" AutomationProperties.AccessibilityView="Raw" HorizontalAlignment="Stretch" Height="{ThemeResource AppBarButtonContentHeight}" Margin="{ThemeResource AppBarButtonContentViewboxCollapsedMargin}">
    <ContentPresenter x:Name="ViewboxContentPresenter" Foreground="{TemplateBinding Foreground}">
        <ContentPresenter.Content>
            <SymbolIcon Symbol="OutlineStar" />
        </ContentPresenter.Content>
    </ContentPresenter>
</Viewbox>

Итак, вот почему Unhandled Exception было брошено. После переименования всех целей этого сеттера все начало работать как положено.

1 Ответ

0 голосов
/ 03 мая 2020

Вы можете использовать VisualStateManager для выполнения вашего требования.

Используйте StateTrigger, чтобы связать свойство AppBarToggleButton * IsChecked. Используйте Setter для установки свойства после проверки кнопки. 

<Grid>
        <CommandBar VerticalAlignment="Bottom">
            <AppBarToggleButton x:Name="toggleBtn" Icon="UnFavorite" Label="UnFavorite"/>
        </CommandBar>

        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup>
                <VisualState x:Name="checkedbtn">
                    <VisualState.StateTriggers>
                        <StateTrigger IsActive="{Binding ElementName=toggleBtn, Path=IsChecked}"/>
                    </VisualState.StateTriggers>
                    <VisualState.Setters>
                        <Setter Target="toggleBtn.Icon" Value="Favorite"/>
                        <Setter Target="toggleBtn.Label" Value="Favorite"/>
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
...