Question

这是我在这里的第一篇文章，所以要容忍我在这里犯的任何错误;）

我正在构建一个应用程序，我想要一个标签布局。所以我目前正在使用此代码：

<Grid Margin="0,97,0,0" Height="50" VerticalAlignment="Top">
        <ItemsControl Margin="0,0,0,0" x:Name="itemsControl" >
            <ItemsControl.ItemTemplate>
                <DataTemplate>
                    <TextBlock  Text="{Binding name}" IsDoubleTapEnabled="False" IsHoldingEnabled="False" IsRightTapEnabled="False" />
                </DataTemplate>
            </ItemsControl.ItemTemplate>
        </ItemsControl>
    </Grid>
    <FlipView x:Name="flipView" Margin="0,147,0,0" ItemsSource="{Binding groups}">
        <FlipView.ItemTemplate>
            <DataTemplate>
                <ListView ItemsSource="{Binding articles}">
                    <ListView.ItemTemplate>
                        <DataTemplate>
                            <Grid>
                                <TextBlock Text="{Binding category}"/>
                                <TextBlock Text="{Binding title}"/>
                                <Image Source="{Binding image}"></Image>
                            </Grid>
                        </DataTemplate>
                    </ListView.ItemTemplate>
                </ListView>
            </DataTemplate>
        </FlipView.ItemTemplate>
    </FlipView>

我希望Items填充ItemsControl的宽度并且大小相同。

谢谢。卢卡

修改只是为了更好地解释我想要的东西： I want tabs looking like the "365 Steps", "News", "Event", "Archiv" tabs in the Picture

Answer 1

你可以使用Pivot来实现这样的目标：

为此，您可以使用以下代码：

<Grid x:Name="grid">
    <Grid VerticalAlignment="Top" HorizontalAlignment="Stretch" Height="100">
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>
        <Grid Grid.Column="0" x:Name="item1" Background="DarkBlue" Tapped="item1_Tapped"/>
        <Grid Grid.Column="1" x:Name="item2" Background="Orange" Tapped="item2_Tapped"/>
        <Grid Grid.Column="2" x:Name="item3" Background="DarkGray" Tapped="item3_Tapped"/>
    </Grid>
    <Pivot x:Name="rootPivot" IsHitTestVisible="False" Margin="0,52,0,0">
        <PivotItem Margin="0">
            <TextBlock Text="Content of pivot item 1."/>
        </PivotItem>
        <PivotItem Margin="0">
            <TextBlock Text="Content of pivot item 2."/>
        </PivotItem>
        <PivotItem Margin="0">
            <Grid Background="LightGray">
                <TextBlock Text="Content of pivot item 3."/>
            </Grid>
        </PivotItem>
    </Pivot>
</Grid>

item_Tapped（）事件处理程序：

private void item3_Tapped( object sender, TappedRoutedEventArgs e )
{
    rootPivot.SelectedIndex = 2;
}

Answer 2

在此处查看有关如何执行此操作的完整示例：https://blog.hompus.nl/2015/09/04/responsive-pivot-headers-in-universal-windows-platform-apps/

导入部件

<Setter Target="HeaderClipper.HorizontalContentAlignment" Value="Center" />

设置HorizontalContentAllignment以获得居中
注意枢轴头的错误默认高度！该默认模板有48设置为高度，这是不够的大多数情况！

Answer 3

使用Pivot的其他答案可能是你可能会走的方向。如果你想玩一下你可以创建自己的，但你可能会牺牲一些能力来获得Pivot自动为你提供的东西。

我在5分钟内完全抛出了这些内容，以演示如何根据需要创建自己的UI。我没有放任何类似绑定，优化菜单如何使用单个属性和转换器检测哪个高亮显示等。

XAML

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>

        <Grid Grid.Column="0" Tapped="OnTapped" Tag="0">
            <TextBlock Text="365 Steps" HorizontalAlignment="Center" Margin="0,0,0,6"/>
            <Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R0"/>
        </Grid>
        <Grid Grid.Column="1" Tapped="OnTapped" Tag="1">
            <TextBlock Text="News" HorizontalAlignment="Center" Margin="0,0,0,6"/>
            <Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R1" Visibility="Collapsed"/>
        </Grid>
        <Grid Grid.Column="2" Tapped="OnTapped" Tag="2">
            <TextBlock Text="Event" HorizontalAlignment="Center" Margin="0,0,0,6"/>
            <Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R2" Visibility="Collapsed"/>
        </Grid>
        <Grid Grid.Column="3" Tapped="OnTapped" Tag="3">
            <TextBlock Text="Archive" HorizontalAlignment="Center" Margin="0,0,0,6"/>
            <Rectangle Fill="Red" Height="5" HorizontalAlignment="Stretch" VerticalAlignment="Bottom" Name="R3" Visibility="Collapsed"/>
        </Grid>
    </Grid>

    <ListView Grid.Row="1" Name="MyList">
        <ListBoxItem>Foo</ListBoxItem>
        <ListBoxItem>Bar</ListBoxItem>
    </ListView>
</Grid>

代码

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        R0.Visibility = Visibility.Visible;
        R1.Visibility = Visibility.Collapsed;
        R2.Visibility = Visibility.Collapsed;
        R3.Visibility = Visibility.Collapsed;
    }

    private void OnTapped(object sender, TappedRoutedEventArgs e)
    {
        var grid = sender as Grid;
        string tag = grid.Tag as string;
        // do more stuff depending on tag
        switch (int.Parse(tag))
        {
            case 0:
                R0.Visibility = Visibility;
                R1.Visibility = Visibility.Collapsed;
                R2.Visibility = Visibility.Collapsed;
                R3.Visibility = Visibility.Collapsed;
                MyList.DataContext = null;  // todo: SET TO YOUR DATA MODEL
                break;

            case 1:
                R1.Visibility = Visibility;
                R0.Visibility = Visibility.Collapsed;
                R2.Visibility = Visibility.Collapsed;
                R3.Visibility = Visibility.Collapsed;
                break;
        }
    }
}

这并不是一个完整的解决方案，只是一个快速启动和你可以激发的想法。取决于您的项目，目标受众以及设计最适合您案例的许多其他因素。

ItemsControl相同大小的项目

3 个答案: