2

Windows 8.1 ユニバーサル アプリ (VS2013 を使用) に取り組んでおり、 内にタブを作成したいと考えていますGridView。検索したところ、タブを作成できないことがわかったので、少なくともタブのように見えるものを作成できるソリューションが必要です。

必要なものは次のとおりです。

タブヘッダーとして画像があります。各画像（Appbarアイコンなど）をクリックStackPanelすると、同じグリッドに異なる画像が表示されます。

これは、アプリを次のようにする必要がある方法です。

これは、アプリが次のように見える必要がある方法です

4

1 に答える 1

0

電話では、ピボット コントロールの使用を検討してください。デスクトップでは、Pivo​​t が存在する Windows 10 UWP アプリにアップグレードするまで、そのようなコントロールはありません。

それ以外の場合は、これを試してください：

<Grid x:Name="grid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Interactivity:Interaction.Behaviors>
        <Core:EventTriggerBehavior EventName="Loaded">
            <Core:GoToStateAction StateName="Tab1State"/>
        </Core:EventTriggerBehavior>
    </Interactivity:Interaction.Behaviors>

    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="TabVisualStateGroup">
            <VisualState x:Name="Tab1State">
                <VisualState.Setters>
                    <Setter Target="Tab1Button.(ToggleButton.IsChecked)" Value="True"/>
                    <Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab1Content}"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Tab2State">
                <VisualState.Setters>
                    <Setter Target="Tab2Button.(ToggleButton.IsChecked)" Value="True"/>
                    <Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab2Content}"/>
                </VisualState.Setters>
            </VisualState>
            <VisualState x:Name="Tab3State">
                <VisualState.Setters>
                    <Setter Target="Tab3Button.(ToggleButton.IsChecked)" Value="True"/>
                    <Setter Target="TabContent.SelectedItem" Value="{Binding ElementName=Tab3Content}"/>
                </VisualState.Setters>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <StackPanel Grid.Row="0" Orientation="Horizontal">

        <!-- re-template radiobuttons as togglebuttons -->
        <StackPanel.Resources>
            <Style TargetType="RadioButton">
                <Setter Property="MinWidth" Value="0" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="RadioButton">
                            <ToggleButton IsChecked="{Binding IsChecked, 
                                RelativeSource={RelativeSource Mode=TemplatedParent}, Mode=TwoWay}">
                                <ContentPresenter />
                            </ToggleButton>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </StackPanel.Resources>

        <RadioButton GroupName="TabButtons" x:Name="Tab1Button">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Checked">
                    <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="16" Height="16" Fill="Red" />
                <TextBlock Margin="4,0" Text="Tab 1" />
            </StackPanel>
        </RadioButton>

        <RadioButton GroupName="TabButtons" x:Name="Tab2Button">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Checked">
                    <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="16" Height="16" Fill="Green" />
                <TextBlock Margin="4,0" Text="Tab2" />
            </StackPanel>
        </RadioButton>

        <RadioButton GroupName="TabButtons" x:Name="Tab3Button">
            <Interactivity:Interaction.Behaviors>
                <Core:EventTriggerBehavior EventName="Checked">
                    <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
                </Core:EventTriggerBehavior>
            </Interactivity:Interaction.Behaviors>
            <StackPanel Orientation="Horizontal">
                <Rectangle Width="16" Height="16" Fill="Blue" />
                <TextBlock Margin="4,0" Text="Tab3" />
            </StackPanel>
        </RadioButton>

    </StackPanel>

    <FlipView x:Name="TabContent" Grid.Row="1">

        <!-- if the user changes the item through the flipview -->
        <Interactivity:Interaction.Behaviors>
            <Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab1Content}">
                <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab1State}"/>
            </Core:DataTriggerBehavior>
            <Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab2Content}">
                <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab2State}"/>
            </Core:DataTriggerBehavior>
            <Core:DataTriggerBehavior Binding="{Binding SelectedItem.Name, ElementName=TabContent}" Value="{Binding Name, ElementName=Tab3Content}">
                <Core:GoToStateAction StateName="{Binding Name, ElementName=Tab3State}"/>
            </Core:DataTriggerBehavior>
        </Interactivity:Interaction.Behaviors>

        <Grid Background="Red" x:Name="Tab1Content">
            <!-- content -->
        </Grid>

        <Grid Background="Green" x:Name="Tab2Content">
            <!-- content -->
        </Grid>

        <Grid Background="Blue" x:Name="Tab3Content">
            <!-- content -->
        </Grid>

    </FlipView>


</Grid>

XAML Behaviors SDK を必ず参照してください。

コードを確認します。トリックは、視覚的な状態にあります。複数のコントロールの更新を含め、それらを更新して、必要なことを行うことができます。あなたに必要なものは何でも。

次のようになります。

ここに画像の説明を入力

頑張ってください！

于 2015-12-05T01:38:52.837 に答える