How do I make listView content alignment horizontally?

Question

I am loading checkboxes as tags from sql table but these checkboxes are oriented verticaly what is really ugly. How do I can orientate them to be horizontal?

I tried to set the setter property to Stretch but it only center these checkboxes into center of the listview and stays vertically.

Anyone who could help?

xaml:

<ListView Name="listCategory" Visibility="Visible" BorderThickness="0" HorizontalAlignment="Left" Margin="114,70,0,0" Width="207" RenderTransformOrigin="0.5,0.5" Height="180" VerticalAlignment="Top">
  <ListView.ItemContainerStyle>
     <Style TargetType="ListViewItem">
       <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
       <Setter Property="VerticalContentAlignment" Value="Top"/>
     </Style>
  </ListView.ItemContainerStyle>
<ListView.ItemTemplate>
      <DataTemplate>
         CheckBox Content="{Binding tag}" IsChecked="{Binding Checked}" HorizontalAlignment="Center"/>
      </DataTemplate>
</ListView.ItemTemplate>

code for listCategory

    public void loadCategoryTags()
    {
        DataTable dt = new DataTable();

        using (SqlCommand selectTags = new SqlCommand("select tag from Categories", cs))
        {
            cs.Open();
            using (SqlDataAdapter dataAd = new SqlDataAdapter(selectTags))
            {
                dt = new DataTable();
                dataAd.Fill(dt);
            }
            cs.Close();
        }
        dt.Columns.Add(new DataColumn("Checked", typeof(bool)) { DefaultValue = false });


        listCategory.ItemsSource = dt.DefaultView;
    }

When you say "oriented vertically", what does that mean to you? Are you saying that you want them in a row instead of a column? If that's the case, try this solution; it's the same for a ListView as for an ItemsControl: https://stackoverflow.com/a/1052512/424129 — 15ee8f99-57ff-4f92-890c-b56153, Apr 01 '19 at 14:50
@EdPlunkett yea I saw this solution. But where should I actually type that in xaml? I tried to include it for whole listview but it creates one empty checkbox and that is problem. Because I need that listview to be empty on load. I ll add code behind. Check update — Cabry, Apr 02 '19 at 09:43

walterlv · Answer 1 · 2019-04-02T11:30:47.870

0

Original Answer

You'd better not customize the main layout in DataTemplate but change it in the ListViewItem style.

That is:

Remove HorizontalAlignment="Center" property from your CheckBox;
Add ControlTemplate setter to your ListViewItem setters and use the HorizontalContentAlignment property.

Updated

I know that you're not handling the HorizontalAlignment property but handling the Orientation property. Several panels have Orientation property and you can choose one of them to achieve your desired layout.

This is the updated code:

<ListView Name="listCategory" Visibility="Visible" BorderThickness="0" HorizontalAlignment="Left"
          Margin="114,70,0,0" Width="207" RenderTransformOrigin="0.5,0.5" Height="180" VerticalAlignment="Top">
    <ListView.ItemsPanel>
        <ItemsPanelTemplate>
            <!-- If you use a StackPanel, your items will be in a single line. --> 
            <!--<StackPanel Orientation="Horizontal" />-->
            <!-- If you use a WrapPanel, your items will be wrapped into multiple lines. --> 
            <WrapPanel Orientation="Horizontal" />
            <!-- Or you can change it to other available panels to layout the items in a specified type. -->
        </ItemsPanelTemplate>
    </ListView.ItemsPanel>
    <ListView.ItemTemplate>
        <DataTemplate>
            <CheckBox Content="{Binding tag}" IsChecked="{Binding Checked}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

edited Apr 02 '19 at 11:30

answered Apr 01 '19 at 23:43

walterlv

2,366
13
73

Tried your code, but it only sort items to be more 'organized' if I can say it like that. But it is still vertical and no horizontal. – Cabry Apr 02 '19 at 09:47
Did you mean that you want to put your items horizontally in a line? – walterlv Apr 02 '19 at 09:54
Yes basically like in this picture [imgur picture](https://imgur.com/a/WuacZFB) @walterlv – Cabry Apr 02 '19 at 11:05
That picture is a bit abstract and I can't understand what you need. Could you draw a more detailed picture again? – walterlv Apr 02 '19 at 11:08
no problem. So here is the [image](https://imgur.com/a/UmIN0zP). On **Picture 1** you can see listView with code you provided me, **Picture 2** is mine original code in original question. And **Picture 3** is what I would like to reach and store checkboxes in horizontal line. – Cabry Apr 02 '19 at 11:18
I still can't understand what you want from a single static picture. But I've updated my answer for you to try more layout options. The difference between the panels are the dynamic layout but not the static layout. By checking this page you may know what I mean for dynamic layout: [Responsive design techniques - Windows UWP applications | Microsoft Docs](https://learn.microsoft.com/en-us/windows/uwp/design/layout/responsive-design) – walterlv Apr 02 '19 at 11:33
It seems that it is working. One more question maybe. Is it possible to set that I want only 5 items on one row, and then it would make new row under it? Alike paragraph. Hope you understand. – Cabry Apr 02 '19 at 12:54
@Cabry Yes, it is possible. Try to use UniformGrid instead of the WrapPanel and set the Columns property to 5. – walterlv Apr 02 '19 at 12:59

How do I make listView content alignment horizontally?

1 Answers1

Original Answer

Updated