我正在使用Windows 8.1 Universal应用程序(使用VS2013),我想在GridView
内创建标签。搜索之后,我发现无法创建标签,所以我需要一些解决方案,我可以创建至少看起来像标签的东西。
这就是我需要的:
我有图片标签标题。当我点击每张图片(例如Appbar
图标)时,不同的StackPanel
应出现在同一网格上。
这就是我需要我的应用程序的样子:
答案 0 :(得分:0)
在手机上,请考虑使用Pivot控件。在桌面上,除非您升级到存在Pivot的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。
查看代码。诀窍在于视觉状态。您可以更新它们以执行任何操作,包括更新多个控件。无论你需要什么。
看起来像这样:
祝你好运!