Question

我有一个带有CommandBar的UWP应用。 CommandBar在这里主要用作状态显示，因此将不包含任何可单击的按钮。但是，为了不将我的设计可能性限制在栏的“内容”部分，我想在右侧使用禁用的AppBarButtons。由于不需要将它们与活动按钮区分开，我希望它们具有默认的前景，而不是应用于禁用按钮的浅灰色。

据我所读，这在XAML中不可能直接实现，因此需要定义一个新模板或新按钮类。我找不到任何可以帮助我朝那个方向发展的资源。

我也将对一个解决方案感到满意，该解决方案使我可以在栏的“内容”部分中显示对齐的内容，而根本不需要按钮。

相关：Change style of a Button when its Disabled ( IsEnabled=False ) 它与用于StackPanel的XAML代码不同，并且由于CommandBar在设计器中不可见，因此引用设计器的答案也不适用。

编辑：XAML代码（当然，我的问题涉及ProfileButton）

<Page
    x:Class="Device_Reader.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Device_Reader"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" Height="700" Width="959">
    <Page.Resources>
        <SolidColorBrush x:Key="AppBarButtonBackgroundDisabled" Color="Transparent"/>
        <SolidColorBrush x:Key="AppBarButtonForegroundDisabled" Color="Black"/>
    </Page.Resources>
    <Page.BottomAppBar>
        <CommandBar OverflowButtonVisibility="Collapsed" DefaultLabelPosition="Right"  IsOpen="True" IsSticky="True">
            <CommandBar.Content>
                <Grid Margin="5,10,0,0">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="30" />
                        <ColumnDefinition Width="150" />
                    </Grid.ColumnDefinitions>
                    <Image Name="RedFlag" Grid.Column="0" Grid.Row="0" Width="20" Source="Assets/flag.svg"/>
                    <Image Name="YellowFlag" Grid.Column="1" Grid.Row="0" Width="20" Source="Assets/flag.svg"/>
                    <Image Name="GreenFlag" Grid.Column="2" Grid.Row="0" Width="20" Source="Assets/flag.svg"/>
                    <Image Name="BlueFlag" Grid.Column="3" Grid.Row="0" Width="20" Source="Assets/flag.svg"/>
                    <TextBlock Name="ConnectionStatusText" Grid.Column="4" Grid.Row="0" Text="   Off"/>

                </Grid>
            </CommandBar.Content>
            <AppBarButton Name="ProfileButton" Label="Profile" IsEnabled="False">
                <AppBarButton.Icon>
                    <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE771;"/>
                </AppBarButton.Icon>
            </AppBarButton>
        </CommandBar>
    </Page.BottomAppBar>
</Page>

Answer 1

如果创建AppBarButton的样式副本会给您带来麻烦，那么有一种更简单的方法可以实现您的目的。

我们要做的事情很简单，在 Disabled （禁用）状态下更改AppBarButton的背景色和前景色。

将此代码添加到您的页面：

<Page.Resources>
    <SolidColorBrush x:Key="AppBarButtonBackgroundDisabled" Color="Transparent"/>
    <SolidColorBrush x:Key="AppBarButtonForegroundDisabled" Color="White"/>
</Page.Resources>

现在运行该应用程序，如果您不对AppBarButton应用任何其他特殊样式，则其背景颜色和前景色将以 Disabled （禁用）状态更改。

>> 现在解释原因。

我们创建了这两种颜色资源以覆盖默认颜色资源。在默认样式AppBarButton中，这两种系统颜色资源在“禁用”状态下被引用。如果我们在Page中进行重写，则Page中的颜色资源具有更高的优先级，并且当禁用Page下的AppBarButton时，颜色将会更改。

但是您的情况是在CommandBar中显示文本。如果不需要按钮，则可以尝试使用StackPanel代替CommandBar，然后在其中写入TextBlock。

更新

Page.BottomAppBar似乎引用了不同的颜色资源，您可以考虑将CommandBar放在Page.Content中，如下所示：

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="*"/>
        <RowDefinition Height="Auto"/>
    </Grid.RowDefinitions>

    <!--Your Main Content-->

    <CommandBar Grid.Row="1">
        <CommandBar.Content>
            <!--Other Content-->
        </CommandBar.Content>
        <AppBarButton Name="ProfileButton" Label="Profile" IsEnabled="False">
            <AppBarButton.Icon>
                <FontIcon FontFamily="Segoe MDL2 Assets" Glyph="&#xE771;"/>
            </AppBarButton.Icon>
        </AppBarButton>
    </CommandBar>
</Grid>

这将覆盖资源

最诚挚的问候。

禁用时的UWP命令栏AppButton前景（IsEnabled =“ False”）

1 个答案: