在 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;}
}

列表传递给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>

Objects

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), or a DataTemplateSelector，具体取决于您的 data-structure。

在 windows 8.1 中水平生成视图的列表视图

List view to generate the view horizontally in windows 8.1

win-universal-app

windows-8.1-universal