かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

UWPのPivotで左右の余白を0にする

Pivotコントロールを使うと、コンテンツを表示するところの左右に余白が作られてしまいます。 こいつを消したい!というときにどうするかというと…

方法1

PivotItemのMarginを0に設定する。

PivotItemの数が固定で、自分PivotItemを置いてるだけならこれがお手軽です。

<Pivot>
  <PivotItem Margin="0" ...>
    ...
  </PivotItem>
</Pivot>

方法2

PivotのItemContainerStyleでPivotItemのStyleを指定してMarginを消す。

これもお手軽です。というか、方法1よりも正攻法っぽい。

<Pivot>
    <Pivot.ItemContainerStyle>
        <Style TargetType="PivotItem">
            <Setter Property="Margin"
                    Value="0" />
        </Style>
    </Pivot.ItemContainerStyle>
    <PivotItem Header="Item1">
        <Border Background="Red" />
    </PivotItem>
    <PivotItem Header="Item2">
        <Border Background="Red" />
    </PivotItem>
    <PivotItem Header="Item3">
        <Border Background="Red" />
    </PivotItem>
</Pivot>

方法3

PivotItemのデフォルトのマージンを置き換える。

PivotItemのMarginはgeneric.xamlにThemeResourceでPivotItemMarginという値で12,0という感じで定義されています。これを上書きしてやる方法です。

App.xamlに以下のように定義してやることで、アプリで使うすべてのPivotの余白を消します。

<Application
    x:Class="App25.App"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:App25"
    RequestedTheme="Light">
    <Application.Resources>
        <ResourceDictionary>
            <ResourceDictionary.ThemeDictionaries>
                <ResourceDictionary x:Key="Default">
                    <Thickness x:Key="PivotItemMargin">0</Thickness>
                </ResourceDictionary>
            </ResourceDictionary.ThemeDictionaries>
        </ResourceDictionary>
    </Application.Resources>
</Application>

まとめ

基本、方法2かな?PivotのStyleを定義しておいて、そこでItemContainerStyleを指定しておく感じ。そして、余白消したいPivotのStyleに、定義しておいたStyleを適用すればよさそうです。

アプリ全体の方針としてPivotの余白消えていいよっていうなら方法3あたりでもいいかも。