Override or add some style properties in WPF

Question

I am porting a Bootstrap theme to WPF and faced a problem: I can't change some properties using additional style for StackPanel. I have ResourceDictionary containing BtnBase base style and BtnPrimary, BtnSecondary etc. All of them were inherited from BtnBase and contain only color properties. BtnBase does not contain any margin rule. When I try to add margin rule for a current StackPanel, there is no effect. I read about styles and knew that more than one style can't be applied, styles in ResourceDictionary have higher priority and I should use BasedOn. But I need to copy and paste my style in the StackPanel and replace BasedOn for each button variant. Is there a way to bypass it and add margin property for all styles?

code:

<StackPanel Orientation="Horizontal" Height="32">
        <StackPanel.Resources>
            <Style TargetType="{x:Type Button}" BasedOn="{StaticResource BtnBase}>
                <Setter Property="Margin" Value="0,0,10,0"/>
            </Style>
        </StackPanel.Resources>
        <Button Style="{DynamicResource BtnPrimary}" Content="Primary" />
        <Button Style="{DynamicResource BtnSecondary}" Content="Secondary" />
        <Button Style="{DynamicResource BtnSuccess}" Content="Success" />
        <Button Style="{DynamicResource BtnInfo}" Content="Info" />
        <Button Style="{DynamicResource BtnWarning}" Content="Warning" />
        <Button Style="{DynamicResource BtnDanger}" Content="Danger" />
        <Button Style="{DynamicResource BtnLight}" Content="Light" />
        <Button Style="{DynamicResource BtnDark}" Content="Dark" />
    </StackPanel>

When you manually set the style like you do for each button then the style in Stackpanel.Resouces is not applied. If you remove the style part of each button, then the style in Stackpanel.Resource will apply to all buttons. — Nawed Nabi Zada
Seems to me that all styles are the same except for the background. Make one style with all the properties which are the same, and set the background of each button. — Nawed Nabi Zada
@NawedNabiZada No, there are many colors, background, hover background, mouse pressed background and so on. Totally 8 colors for each button style — ZelDa
@NawedNabiZada I need a custom margin only for buttons in this StackPanel. In other containers it might be different. My styles are just a skin. — ZelDa

ASh ASh · Accepted Answer · 2020-05-28T15:25:18

You can treat all buttons as Items in ListBox.

ListBox will create a ListBoxItem for each Button, and you can add Margin to those ListBoxItems, using ItemContainerStyle. That doesn't modify Buttons styles, but creates same effect.

In ItemContainerStyle I also change ListBoxItem template to undo hover, selection colors, etc, which can change appearance - just plain ContentPresenter is left.

ItemsPanel by default is vertical StackPanel, but I changed ItemsPanel and layout to horizontal StackPanel.

<ListBox>
    <ListBox.ItemsPanel>
        <ItemsPanelTemplate>
            <StackPanel Orientation="Horizontal" Height="32"/>
        </ItemsPanelTemplate>
    </ListBox.ItemsPanel>

    <ListBox.ItemContainerStyle>
        <Style TargetType="ListBoxItem">
            <Setter Property="Margin" Value="4"/>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <ContentPresenter/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </ListBox.ItemContainerStyle>

    <Button Style="{DynamicResource BtnPrimary}" Content="Primary" />
    <Button Style="{DynamicResource BtnSecondary}" Content="Secondary" />
    <Button Style="{DynamicResource BtnSuccess}" Content="Success" />
    <Button Style="{DynamicResource BtnInfo}" Content="Info" />
    <Button Style="{DynamicResource BtnWarning}" Content="Warning" />
    <Button Style="{DynamicResource BtnDanger}" Content="Danger" />
    <Button Style="{DynamicResource BtnLight}" Content="Light" />
    <Button Style="{DynamicResource BtnDark}" Content="Dark" />
</ListBox>

Override or add some style properties in WPF

1 Answers