Просмотр списка для создания горизонтального отображения в окнах 8.1

Question

Я новичок в разработке окон. В настоящее время я создаю страницу событий, где мне нужно создать список событий на основе дат.

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

Список передается переднего события для генерации представления. Вид должен выглядеть следующим образом: [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, в зависимости от вашей структуры данных.