かずきのBlog@hatena

日本マイクロソフトに勤めています。XAML + C#の組み合わせをメインに、たまにASP.NETやJavaなどの.NET系以外のことも書いています。掲載内容は個人の見解であり、所属する企業を代表するものではありません。

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あたりでもいいかも。