0

WP アプリで Pivot コントロールがどのように見えるかを次に示します。

ここに画像の説明を入力

ここに同じコードがあります。

<phone:Pivot>
            <!--Pivot item one-->
            <phone:PivotItem>
                <phone:PivotItem.Header>
                    <ContentControl>
                        <Image Source="/Assets/alarmClock.png"/>
                    </ContentControl>
                </phone:PivotItem.Header>

                <Grid>
                    <TextBlock Text="hello1"/>
                </Grid>
            </phone:PivotItem>

            <!--Pivot item two-->
            <phone:PivotItem >
                <phone:PivotItem.Header>
                    <ContentControl>
                        <Image Source="/Assets/clock.png"/>
                    </ContentControl>

                </phone:PivotItem.Header>
                <Grid>
                    <TextBlock Text="hello 2"/>
                </Grid>
            </phone:PivotItem>

            <!--Pivot item three-->
            <phone:PivotItem>
                <phone:PivotItem.Header>
                    <ContentControl>
                        <Image Source="/Assets/timer.png"/>
                    </ContentControl>

                </phone:PivotItem.Header>
                <Grid>
                    <TextBlock Text="hello 3"/>
                </Grid>
            </phone:PivotItem>
        </phone:Pivot>

ヘッダーの外観をカスタマイズしたい。これは、ヘッダーを整列させる方法です（下の画像を参照）。どうすればよいのかわかりません。以下は、黒いグリッドと垂直パイプでどのように見えるかです。誰でもこれで私を助けることができますか? 同じスタイルを書く必要があると思います。ただし、以下のように配置が変更されるようにスタイルを定義できる方法がわかりません。 ここに画像の説明を入力

4

1 に答える 1

0

あなたが達成したいことに近づくほど、それほど努力する必要はありません:

<phone:PhoneApplicationPage.Resources>
    <DataTemplate x:Key="PivotHeader">
        <Grid Margin="-11,0,-11,0">
            <Border BorderBrush="#FFF70000" BorderThickness="1">
                <Grid Width="152" HorizontalAlignment="Center">
                    <Image Height="80" Source="{Binding}"></Image>
                </Grid>
            </Border>
        </Grid>
    </DataTemplate>

</phone:PhoneApplicationPage.Resources>

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
    <!--Pivot Control-->
    <phone:Pivot HeaderTemplate="{StaticResource PivotHeader}">
        <phone:PivotItem Header="/Assets/Clock.png">
            <Grid>
                <TextBlock Text="hello 1"/>
            </Grid>
        </phone:PivotItem>

        <phone:PivotItem Header="/Assets/Clock.png">
            <Grid>
                <TextBlock Text="hello 2"/>
            </Grid>
        </phone:PivotItem>

        <phone:PivotItem Header="/Assets/Clock.png">
            <Grid>
                <TextBlock Text="hello 3"/>
            </Grid>
        </phone:PivotItem>

    </phone:Pivot>
</Grid>

ただし、ピボット コントロールはAndroidやiPhoneのタブのようには機能しないことに気付くでしょう。

Windows Phone のピボット コントロールの動作を変更することもお勧めしません。

おそらく、あなたがやろうとしていることを達成するための最良の方法は、ピボット ページの上部にあるボタンを使用し、変更されたピボットの選択を変更して手動で動作を処理することです。

于 2013-08-17T08:55:10.017 に答える