List view to generate the view horizontally in windows 8.1

Question

I am new to windows development. I am currently designing a events page where I need to create a list of events based on dates.

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 is passed to front-event to generate a view. View should be like: [h][d1][d2][d3][h2][d1][d2][h3][d1]...[h(n)][d(n)]. Aimed model

The list should display the data horizontally and heading of the list need to be as in the image. How can I have heading and content display on the same horizontal line.?

Targeting platform is windows 8.1 app.

Updated code after comment

                            <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

Assuming you are displaying your items in a ListView.

First thing you can do is change your ItemsPanels orientation to horizontal:

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

Next, you need to differentiate between you headings and your appointments. You can achieve this either by using GroupStyle (as for example shown here), or a DataTemplateSelector, depending on your data-structure.