

■前置き  
WPFにてButtonの外観をカスタマイズするため、ControlTemplateを以下のように書き換えました。  
（コメント「<\--コントロールテンプレートを書き換えたボタン -->」以下の部分です）  
また、後述する問題を分かりやすくするため、Grid全体を覆うように背景色が真っ赤なBorderコントロールを配置し、その上にボタンを配置しています。

[code]

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition/>
            <RowDefinition/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
    
        <Border Background="Red" Grid.ColumnSpan="2" Grid.RowSpan="2"/>
    
        <!--標準ボタン-->
        <Button Grid.Row="0" Name="NormalLeft">１</Button>
        <Button Grid.Row="0" Grid.Column="1" Name="NormalRight">２</Button>
    
        <!--コントロールテンプレートを書き換えたボタン-->
        <Button Grid.Row="1" Content="ひだりボタン"  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="みぎボタン" 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>
    
[/code]

■問題  
書き換えたボタンを二つ並べた際に、ボタンとボタンに微妙に隙間が出来てしまうようです。  
初期表示時は問題ないのですが、Windowの枠をドラッグしてぐいっと引き伸ばすと、なぜかボタンとボタンに隙間ができてしまい、後ろにあるボーダーコントロールの真っ赤な色が透けてしまいます。  
（以下の添付画像を参照ください。）

＜初期表示＞  
[![初期表示](https://i.stack.imgur.com/LV4Xp.png)](https://i.stack.imgur.com/LV4Xp.png)

＜Windowサイズ変更後＞  
赤色が透けている  
[![サイズ調整後](https://i.stack.imgur.com/Cauw6.png)](https://i.stack.imgur.com/Cauw6.png)

■聞きたいこと  
WPF標準のボタンのように、Windowを引き延ばしてもボタンとボタンの間が見えないようにしたいのですが、どのようにすればよいでしょうか。

■動作環境  
.NET Framework 4.6.1  
Visual Studio Community 2017  
Windows 8.1


CC BY-SA 4.0
2019-01-03T13:29:40.860
51682
2019-08-13T19:03:20.367
2019-01-03T13:32:46.587
2238
31655
question
c# visual-studio .net wpf
ButtonコントロールのControlTemplateを変更した際の画面のちらつきの原因が知りたい


サイズ変更でコントロールの相対位置が変わり、サイズの丸め処理で1ピクセルの隙間ができることが原因と思われます。  
[本家SOの類似質問](https://stackoverflow.com/q/1880506)

その場合、LayoutRoot(一番外側のGrid)の[UseLayoutRounding](https://docs.microsoft.com/ja-
jp/dotnet/api/system.windows.frameworkelement.uselayoutrounding?view=netframework-4.8#System_Windows_FrameworkElement_UseLayoutRounding)を`true`にすると問題解決するでしょう。  
`<Grid UseLayoutRounding="True">`

.Net
4よりも前のバージョンには`UseLayoutRounding`がないので、[SnapsToDevicePixels](https://docs.microsoft.com/ja-
jp/dotnet/api/system.windows.uielement.snapstodevicepixels?view=netframework-4.8#System_Windows_UIElement_SnapsToDevicePixels)で代用します。

どちらも描画をボケないように描画や配置するプロパティです。  
使用例や違いは上記のリンクや[@ITの記事](http://www.atmarkit.co.jp/ait/articles/1602/17/news034.html)を参考にしてみてください。


CC BY-SA 4.0
2019-01-04T05:54:54.467
51690
2019-01-04T05:54:54.467
9820
51682
answer