CODEWITHSUNDEEP
c#.netwpfxaml
uSeRnAmEhAhAhAhAhA
uSeRnAmEhAhAhAhAhA

Reputation: 2587

XAML Element Alignment issue

I have a list view that will contain notes that I input. I am having trouble figuring out how to have the list view item look how I want it to.

Below is how it should look:

enter image description here

And this is what it currently looks like:

enter image description here

How do I write the list view item in XAML so that the Date and time appear to the very top-right of each list view item, with the text of the note to the left?

<ListView x:Name="list" ItemsSource="{Binding Note}" BorderBrush="{x:Null}" BorderThickness="0">
    <DataTemplate>
        <ListViewItem>
            <StackPanel Orientation="Horizontal">
                                    </StackPanel>
        </ListViewItem>
    </DataTemplate>
</ListView>

Any help at all is much appreciated!

Upvotes: 0

Views: 81

Answers (1)

Todd Bowles
Todd Bowles

Reputation: 1574

You are missing a number of elements required in order to get your screen to look the way you want.

  • You need to define the ItemTemplate for the ListView. You're on the right track here, it is a DataTemplate declared in XAML, you just have to apply it to the ListView.ItemTemplate property.
  • You need to set the HorizontalContentAlignment of the ListView to Stretch (the default is Left, which means your items will not fill the entire content area).
  • You need to use a DockPanel (or other similar panel) inside your DataTemplate to place your date content on the right, and the remainder of your content on the left.
  • You need to disable Horizontal Scrolling (ScrollViewer.HorizontalScrollBarVisbility) on the ListView in order to make your content wrap (otherwise it will just happily draw it all on one line).

I've included a sample ListView that should get you started.

<ListView 
    ItemsSource="{Binding Items}"
    HorizontalContentAlignment="Stretch"
    ScrollViewer.HorizontalScrollBarVisibility="Disabled">
    <ListView.ItemTemplate>
        <DataTemplate>
            <DockPanel>
                <TextBlock 
                    TextWrapping="Wrap" 
                    Text="{Binding Date}" 
                    Background="Magenta" 
                    DockPanel.Dock="Right" />
                <TextBlock Text="{Binding Content}" Background="Lime" />
            </DockPanel>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Upvotes: 2

Related Questions