Nikola Brežnjak blog - Tackling software development with a dose of humor
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Home
Daily Thoughts
Ionic
Stack Overflow
Books
About me
  • Home
  • Daily Thoughts
  • Ionic
  • Stack Overflow
  • Books
  • About me
Nikola Brežnjak blog - Tackling software development with a dose of humor
Stack Overflow

How to properly set the BasedOn in XAML style

profile for Nikola at Stack Overflow, Q&A for professional and enthusiast programmers
I’m a big fan of Stack Overflow and I tend to contribute regularly (am currently in the top 0.X%). In this category (stackoverflow) of posts I will will be posting my top rated questions and answers. This, btw, is allowed as explained in the meta thread here.

My question was:

I have this as the style template:

<Style x:Key="myDogToggleButton1" TargetType="ToggleButton" BasedOn="{x:Null}">
    <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="ToggleButton">
                <Grid>
                    <Image Name="Normal" Source="/images/dogs/dog1.png"/>
                    <Image Name="Pressed" Source="/images/dogs/dog3.png" Visibility="Hidden"/>
                    <Image Name="Disabled" Source="images/dogs/dog5.png" Visibility="Hidden"/>
                </Grid>
                <ControlTemplate.Triggers>
                    <Trigger Property="IsPressed" Value="True">
                        <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
                    </Trigger>
                    <Trigger Property="IsEnabled" Value="False">
                        <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                        <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                    </Trigger>
                </ControlTemplate.Triggers>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>

And now I want another one which is based on the upper one, and this doesn’t work:

<Style x:Key="myDogToggleButton2" TargetType="ToggleButton" BasedOn="{DynamicResource myDogToggleButton1}">
    <Setter Property="Normal" Value="/images/dogs/dog2.png" />
    <Setter Property="Pressed" Value="/images/dogs/dog2.png" />
    <Setter Property="Disabled" Value="/images/dogs/dog2.png" />
</Style>

The error message I get is:

The member "Pressed" is not recognized or is not accessible.
The member "Normal" is not recognized or is not accessible.
The member "Disabled" is not recognized or is not accessible.

I suspect that my different style calling is wrong, so please point out the error.

The answer, by user Heena Patil, was:

Try this

Resource

<Window.Resources>
    <Style x:Key="myDogToggleButton1" TargetType="ToggleButton">
        <Style.Resources>
            <BitmapImage x:Key="Normal" UriSource="Images/darblue_tab.png"/>
            <BitmapImage x:Key="Pressed" UriSource="Images/img-whitebg.png" />
            <BitmapImage x:Key="Disabled" UriSource="Images/img-greenbg.png"/>
        </Style.Resources>
        <Setter Property="FocusVisualStyle" Value="{x:Null}"/>
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                        <Image Name="Normal" Source="{DynamicResource ResourceKey=Normal}" Stretch="Fill"/>
                        <Image Name="Pressed" Source="{DynamicResource ResourceKey=Pressed}" Visibility="Hidden"/>
                        <Image Name="Disabled" Source="{DynamicResource ResourceKey=Disabled}" Visibility="Hidden"/>
                    </Grid>
                    <ControlTemplate.Triggers>
                        <Trigger Property="IsPressed" Value="True">
                            <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                            <Setter TargetName="Pressed" Property="Visibility" Value="Visible"/>
                        </Trigger>
                        <Trigger Property="IsEnabled" Value="False">
                            <Setter TargetName="Normal" Property="Visibility" Value="Hidden"/>
                            <Setter TargetName="Disabled" Property="Visibility" Value="Visible"/>
                        </Trigger>
                    </ControlTemplate.Triggers>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
    <Style x:Key="myDogToggleButton2" TargetType="ToggleButton" BasedOn="{StaticResource myDogToggleButton1}">
        <Style.Resources>
            <BitmapImage x:Key="Normal" UriSource="Images/img-darkbg.png" />
            <BitmapImage x:Key="Pressed" UriSource="Images/Screenshot_5.png"/>
            <BitmapImage x:Key="Disabled" UriSource="Images/img-bluebg.png"/>
        </Style.Resources>
    </Style>
</Window.Resources>

Xaml

<Grid>
    <ToggleButton HorizontalAlignment="Left" Style="{StaticResource myDogToggleButton1}"/>
    <ToggleButton  HorizontalAlignment="Right" Style="{StaticResource myDogToggleButton2}"/>
</Grid>

Update Using single style.

<Grid>
    <ToggleButton Height="300" Width="300" HorizontalAlignment="Left" Style="{StaticResource myDogToggleButton1}"/>
    <ToggleButton  Height="300" Width="300" Style="{StaticResource myDogToggleButton1}" HorizontalAlignment="Right">
        <ToggleButton.Resources>
            <BitmapImage x:Key="Normal" UriSource="Images/img-darkbg.png" />
            <BitmapImage x:Key="Pressed" UriSource="Images/Screenshot_5.png"/>
            <BitmapImage x:Key="Disabled" UriSource="Images/img-bluebg.png"/>
        </ToggleButton.Resources>
    </ToggleButton>
</Grid>

Recent posts

  • When espanso Breaks on Long Replacement Strings (and How to Fix It)
  • 2024 Top Author on dev.to
  • Hara hachi bun me
  • Discipline is also a talent
  • Play for the fun of it

Categories

  • Android (3)
  • Books (114)
    • Programming (22)
  • CodeProject (36)
  • Daily Thoughts (78)
  • Go (3)
  • iOS (5)
  • JavaScript (128)
    • Angular (4)
    • Angular 2 (3)
    • Ionic (61)
    • Ionic2 (2)
    • Ionic3 (8)
    • MEAN (3)
    • NodeJS (27)
    • Phaser (1)
    • React (1)
    • Three.js (1)
    • Vue.js (3)
  • Leadership (1)
  • Meetups (8)
  • Miscellaneou$ (78)
    • Breaking News (8)
    • CodeSchool (2)
    • Hacker Games (3)
    • Pluralsight (7)
    • Projects (2)
    • Sublime Text (2)
  • PHP (6)
  • Quick tips (41)
  • Servers (8)
    • Heroku (1)
    • Linux (3)
  • Stack Overflow (81)
  • Unity3D (9)
  • Windows (8)
    • C# (2)
    • WPF (3)
  • Wordpress (2)

"There's no short-term solution for a long-term result." ~ Greg Plitt

"Everything around you that you call life was made up by people that were no smarter than you." ~ S. Jobs

"Hard work beats talent when talent doesn't work hard." ~ Tim Notke

© since 2016 - Nikola Brežnjak