I want to know why the screen flickers when I change the ControlTemplate of the Button control.

■Preface
In order to customize the appearance of Button in WPF, we have rewritten the ControlTemplate as follows:
(Comment "<--Rewrite Control Template Button -->" and below)
In addition, for ease of understanding of the issues described below, a border control with a bright red background is placed over the entire Grid and buttons are placed over it.

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition/>
        <RowDefinition/>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
        <ColumnDefinition/>
        <ColumnDefinition/>
    </Grid.ColumnDefinitions>

    <Border Background="Red" Grid.ColumnSpan="2" Grid.RowSpan="2"/>

    <!--Standard button-->
    <Button Grid.Row="0" Name="NormalLeft">1</Button>
    <Button Grid.Row="0"Grid.Column="1"Name="NormalRight">2</Button>

    <!--Rewrite Control Template Button-->
    <Button Grid.Row="1" Content="Leave Button" Name="ArrangeLeft">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Name="borderleft"
                        BorderThickness="1"
                         BorderBrush="Black"
                        Background="Green">
                    <ContentPresenter VerticalAlignment="Center"
                              HorizontalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>

    <Button Grid.Row="1" Grid.Column="1" Content="Migi Button" Name="ArrangeRight">
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Border Name="borderright"
                        BorderThickness="1"
                        BorderBrush="Black"
                        Background="Green">
                    <ContentPresenter VerticalAlignment="Center"
                                      HorizontalAlignment="Center"/>
                </Border>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

■Problems
When two rewritten buttons are arranged, there seems to be a slight gap between the buttons.
There is no problem with the initial display, but if you drag the window frame and stretch it out, for some reason there will be a gap between the buttons and the red color of the border control behind it will be visible.
(Please refer to the attached image below.)

Red is transparent

■What do you want to hear?
What should I do if I can't see between the buttons even if I stretch the window like the WPF standard button?

■ Operating Environment
.NET Framework 4.6.1
Visual Studio Community 2017
Windows 8.1

c# visual-studio .net wpf

2022-09-30 21:37

1 Answers

The reason is that the relative position of the control changes due to resizing, and the rounding process creates a gap of 1 pixel.
Similar Questions for Home SO

In that case, UseLayoutRounding in LayoutRoot (the outermost Grid) will solve the problem.
<Grid UseLayoutRound="True">

Versions prior to .Net4 do not have UseLayoutRounding, so use SnapsToDevicePixels instead.

Both are properties that draw and arrange without blurring.
For usage examples and differences, refer to the links above and @IT article.

2022-09-30 21:37

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656