简体   繁体   中英

How do I make listView content alignment horizontally?

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

Original Answer

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

That is:

  1. Remove HorizontalAlignment="Center" property from your CheckBox ;
  2. 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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM