列表视图以在 Windows 8.1 中水平生成视图

Question

我是 Windows 开发的新手。我目前正在设计一个事件页面，我需要在其中创建基于日期的事件列表。

public class Appointment
{
   public string DateTime{get; set;}
   public Appointments Data {get; set;}
}

public class Appointments
{
    public string UserName {get; set;}
    public string VisitorFor {get; set;}
}

List 被传递给 front-event 以生成视图。 视图应该类似于：[h][d1][d2][d3][h2][d1][d2][h3][d1]...[h(n)][d(n)]。 Aimed model

列表应该水平显示数据，并且列表的标题需要与图像中的一样。如何让标题和内容显示在同一水平线上？

目标平台是 windows 8.1 应用程序。

评论后更新代码

                            <VisualStateGroup x:Name="FocusStates">
                                <VisualState x:Name="Focused">
                                    <Storyboard></Storyboard>
                                </VisualState>
                                <VisualState x:Name="Unfocused" />
                                <VisualState x:Name="PointerFocused" />
                            </VisualStateGroup>
                            <VisualStateGroup x:Name="SelectionStates">
                                <VisualState x:Name="Unselected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="Selected">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Gray"/>
                                    </Storyboard>
                                </VisualState>
                                <VisualState x:Name="SelectedUnfocused">
                                    <Storyboard>
                                        <ColorAnimation Duration="0" Storyboard.TargetName="myback" Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)" To="Transparent"/>
                                    </Storyboard>
                                </VisualState>
                            </VisualStateGroup>
                        </VisualStateManager.VisualStateGroups>
                        <Border x:Name="myback" Background="Transparent">
                            <ContentPresenter Content="{TemplateBinding Content}" ContentTemplate="{TemplateBinding ContentTemplate}"/>
                        </Border>
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</ListView.ItemContainerStyle>
<ListView.ItemsPanel>
    <ItemsPanelTemplate>
        <VirtualizingStackPanel Orientation="Horizontal" />
    </ItemsPanelTemplate>
</ListView.ItemsPanel>

<ListView.ItemTemplate>
    <DataTemplate>
        <Textblock Text="{Binding EventsObj.Value.UserName}"/>
        <Textblock Text="{Binding EventsObj.Value.VisitorFor}"/>
    </DataTemplate>
</ListView.ItemTemplate>
<ListView.HeaderTemplate>
    <DataTemplate>
        <Grid Margin="5,10,0,10"  Background="Black">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="68*"/>
                <ColumnDefinition Width="21*"/>
            </Grid.ColumnDefinitions>
            <TextBlock Foreground="White"                                             
                                           RenderTransformOrigin="0.5,0.5" FontSize="20" Grid.ColumnSpan="2" UseLayoutRounding="False" d:LayoutRounding="Auto"  Text="{Binding EventsObj.Key}">
                <TextBlock.RenderTransform>
                    <RotateTransform Angle="270"/>
                </TextBlock.RenderTransform>
            </TextBlock>
        </Grid>
    </DataTemplate>
</ListView.HeaderTemplate>

对象

public class Appointment
{
   public Dictionary<DateTime, List<Appointments>> Data {get; set;}
}

public class Appointments
{
 public string UserName {get; set;}
 public string VisitorFor {get; set;}
}

Answer 1

假设您在 ListView 中显示您的项目。

您可以做的第一件事是将您的 ItemsPanels 方向更改为水平：

<ListView>
  <ListView.ItemsPanel>
    <ItemsPanelTemplate>
      <VirtualizingStackPanel Orientation="Horizontal" />
    </...>

接下来，您需要区分标题和约会。 您可以通过使用 GroupStyle（例如 here）或 DataTemplateSelector 来实现此目的，具体取决于您的数据结构。