CODEWITHSUNDEEP
c#xamluwpwindows-10
drilow
drilow

Reputation: 412

UWP Commandbar AppButton Foreground when disabled (IsEnabled="False")

I have a UWP App with a CommandBar. The CommandBar is intended here mainly as a status display and therefore will not contain any clickable buttons. However, to not limit my design posibilities to the Content part of the bar, I want to use disabled AppBarButtons on the right. As there is no need to distinguish them from active buttons, I would like them to have the default foreground instead of the Light Gray which is applied to disabled ones.

From what I have read, this is not directly possible in XAML, so one would need to define a new template or a new button class. I have not found any resource which helps me in that direction.

I would also be happy with a solution which allows me to display right aligned content in the Content part of the bar, and does not require a button at all.

Related: Change style of a Button when its Disabled ( IsEnabled=False ) It is not the same as the XAML code is for a StackPanel and the answer referring to the designer also does not apply since the CommandBar is not visible in the designer.

EDIT: XAML Code (Of course my question refers to 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>

Upvotes: 1

Views: 480

Answers (1)

Anran Zhang
Anran Zhang

Reputation: 7727

If creating a style copy of an AppBarButton makes you feel in trouble, then there is a simpler way to achieve your purpose.

The thing we have to do is very simple, change the background color and foreground color of the AppBarButton in the Disabled state.

Add this code to your Page:

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

Now run the application, if you don't apply any other special styles to the AppBarButton, then its background color and foreground color will change in the Disabled state.

>> Now explain the reason.

We created these two color resources to override the default color resources. In the default style of AppBarButton, these two system color resources are referenced in the Disabled state. If we rewrite in Page, the color resource in Page has higher priority, and the color will be changed when the AppBarButton under the Page is disabled.

But your situation is to display the text in the CommandBar. If you don't need a button, you might try to use a StackPanel instead of a CommandBar and then write a TextBlock in it.

Update

Page.BottomAppBar seems to reference different color resources, you can consider putting CommandBar in Page.Content like this:

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

This will override the resource

Best regards.

Upvotes: 1

Related Questions