简体   繁体   中英

C# WPF listBox vertical alignment

I have a listBox with a checkbox I want to manage the alignment through setting the vertical alignment.

在此处输入图片说明

I have seen several solution here eg set verticalContentAlignment or verticalAlignment to top but that didn't work.

I've also seen some setting a style but couldn't manage to make it done.

What I'd like is to know WHY the ONLY element is down there. I can't understand why it's stuck in the middle.

Here's my code:

 <ListBox x:Name="lb2Tab3"   HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.8,0"  >
     <CheckBox x:Name="cbEasyRunManagesPcDmis" Margin="20"  Content="EasyRun Manages PC-DMIS" HorizontalAlignment="Left"  VerticalAlignment="Top" Click="cbTouchScreen_Click" />
 </ListBox>

thanx for any help Patrick

--- EDIT --- As requested by Frisbee here is the complete xaml. Sorry for its length:

<Base:WindowViewBase x:Class="EasyRun.Views.MainView.MainView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"                
    xmlns:Base="clr-namespace:Cannoli.Base;assembly=Cannoli"
    xmlns:design="clr-namespace:EasyRun.Views.MainView.Design"
            xmlns:i="http://schemas.microsoft.com/expression/2010/interactivity" 
            xmlns:System="clr-namespace:System;assembly=mscorlib"
            xmlns:CannoliBorderlessWindow="clr-namespace:CannoliBorderlessWindow;assembly=Cannoli.BorderlessWindow"
    d:DesignWidth="212.32" d:DesignHeight="109.92"
            Title="EASY RUN 2.0"  Height="600" Width="900"  MinWidth="500" FontFamily="/EasyRun2.0;component/Resources/Fonts/#FontAwesome" Icon="/EasyRun2.0;component/Resources/Images/Lightning.png"          
    >

<d:WindowViewBase.DataContext>
    <design:DesignMainViewModel />
</d:WindowViewBase.DataContext>

<i:Interaction.Behaviors>
    <CannoliBorderlessWindow:CannoliBorderlessWindowBehavior/>
</i:Interaction.Behaviors>

<!-- RISORSE GLOBALI: VARIABILI -->
<Window.Resources>
    <System:Double x:Key="BUTTON_HEIGHT">50</System:Double>
    <System:Double x:Key="BUTTON_FONTSIZE">20</System:Double>
</Window.Resources>

<Grid x:Name="MainGrid">
    <Grid.Background>
        <ImageBrush ImageSource="/EasyRun2.0;component/Resources/Images/gradientWallpaper.jpg"/>
    </Grid.Background>
    <TextBlock Text="{Binding WelcomeMessage}" HorizontalAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Margin="428,128,99.6,228"/>
    <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" Margin="0,0,0,20">
    </StackPanel>
    <TabControl TabStripPlacement="Left"  Margin="0,0,-0.4,0" Background="{x:Null}">
        <!-- +++++++++++++ TAB1 ++++++++++++ -->
        <TabItem  Name="tabItem1" HorizontalAlignment="Center"  Height="80" FontSize="50" Background="{x:Null}" VerticalAlignment="Top" >
            <TabItem.Header>
                <StackPanel>
                    <TextBlock HorizontalAlignment="Center"   Text="&#xF0A7;"/>
                    <TextBlock Name="tbTab1" HorizontalAlignment="Center" Visibility="Hidden" FontSize="20"/>
                </StackPanel>
            </TabItem.Header>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border x:Name="Border1Tab1" BorderBrush="Gainsboro" BorderThickness="5" Width="200" CornerRadius="8,8,3,3" Margin="10,10,10,10.4" >
                    <ListBox x:Name="lbButtons1" Background="{x:Null}" BorderBrush="{x:Null}" Margin="10,10,10,10" />
                </Border>
                <Border x:Name="Border2Tab1" BorderBrush="Gainsboro" MinWidth="100" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,9.2,10" />
            </Grid>
        </TabItem>
        <!-- +++++++++++++ TAB2 ++++++++++++ -->
        <TabItem Name="tabItem2" HorizontalAlignment="Center" Height="80"  FontSize="50">
            <TabItem.Header>
                <StackPanel>
                    <TextBlock Text="&#xF0F7;"/>
                    <TextBlock Name="tbTab2" Visibility="Hidden" FontSize="20"/>
                </StackPanel>
            </TabItem.Header>
            <TabItem.Background>
                <ImageBrush/>
            </TabItem.Background>
        </TabItem>
        <!-- +++++++++++++ TAB3 ++++++++++++ -->
        <TabItem Name="tabItem3" HorizontalAlignment="Center" Height="80" FontSize="50" Background="{x:Null}" >
            <TabItem.Header>
                <StackPanel>
                    <TextBlock Text="&#xF013;" HorizontalAlignment="Center"  />
                    <TextBlock Name="tbTab3" Visibility="Hidden" FontSize="20"/>
                </StackPanel>
            </TabItem.Header>

            <Grid >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                </Grid.ColumnDefinitions>
                <Border x:Name="Border1Tab3" BorderBrush="Gainsboro" BorderThickness="5" Width="200" CornerRadius="8,8,3,3" Margin="10,10,10,10" >
                    <ListBox x:Name="lbButtons3"  FontSize="{StaticResource BUTTON_FONTSIZE}"  HorizontalContentAlignment="Stretch"  Background="{x:Null}" BorderBrush="{x:Null}"  >
                        <Button Name="bt1Tab3" Background="{x:Null}"   Content="1" Click="Button_Click" />
                        <Button Name="bt2Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}"  Content="2" Click="Button_Click"/>
                        <Button Name="bt3Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}"  Content="3" Click="Button_Click"/>
                        <Button Name="bt4Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}"  Content="4" Click="Button_Click"/>
                        <Button Name="bt5Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}"  Content="5" Click="Button_Click"/>
                        <Button Name="bt6Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}"  Content="6" Click="Button_Click"/>
                        <Button Name="bt7Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}"  Content="7" Click="Button_Click"/>
                        <Button Name="bt8Tab3" Background="{x:Null}" Height="{StaticResource BUTTON_HEIGHT}"  Content="8" Click="Button_Click"/>
                    </ListBox>
                </Border>
                <Border x:Name="Border2Tab3" BorderBrush="Gainsboro"  MinWidth="100" BorderThickness="5" CornerRadius="8,8,3,3" Grid.Column="1" Margin="10,10,10,10"  >
                    <StackPanel >
                        <ListBox x:Name="lb1Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.4,0" d:IsHidden="True"  >
                            <StackPanel Orientation="Horizontal">
                                <TextBlock x:Name="lbLanguage" Margin="20" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center" TextAlignment="Center" Grid.Row="1"><Run Text="Language"/></TextBlock>
                                <ComboBox x:Name="cmbLanguages" Margin="20" HorizontalAlignment="Left"  VerticalAlignment="Center" Width="246" Height="35" DropDownClosed="cmbLanguages_DropDownClosed"/>
                            </StackPanel>
                            <CheckBox x:Name="cbTouchScreen" Margin="20"  Content="Use touch screen" HorizontalAlignment="Left"  VerticalAlignment="Top" Click="cbTouchScreen_Click" />
                            <CheckBox x:Name="cbEnableImages" Margin="20"  Content="Enable Images" HorizontalAlignment="Left"  VerticalAlignment="Top" />
                            <StackPanel Name="spImageDimension" Orientation="Horizontal">
                                <TextBlock x:Name="lbImageDimension" Margin="20" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Center"  TextAlignment="Center"><Run Text="Image dimension"/></TextBlock>
                                <ComboBox x:Name="cmbImageDimension" Margin="20" Text="250 px" HorizontalAlignment="Left"   DropDownClosed="cmbImageDimension_DropDownClosed" VerticalAlignment="Center" Width="246" Height="35" IsEditable="True">
                                    <TextBlock ><Run Text="50 px"/></TextBlock>
                                    <TextBlock ><Run Text="100 px"/></TextBlock>
                                    <TextBlock ><Run Text="150 px"/></TextBlock>
                                    <TextBlock ><Run Text="200 px"/></TextBlock>
                                    <TextBlock ><Run Text="250 px"/></TextBlock>
                                </ComboBox>
                            </StackPanel>
                        </ListBox>
                        <ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Top" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.8,0"  >
                            <CheckBox x:Name="cbEasyRunManagesPcDmis" Margin="20"  Content="EasyRun Manages PC-DMIS" HorizontalAlignment="Left"  VerticalAlignment="Top" Click="cbTouchScreen_Click" />
                        </ListBox>
                        <ListBox x:Name="lb3Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.4,0"  />
                        <ListBox x:Name="lb4Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.4,0" d:IsHidden="True"  >
                        </ListBox>
                        <ListBox x:Name="lb5Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.4,0" d:IsHidden="True"  >
                        </ListBox>
                        <ListBox x:Name="lb6Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.4,0" d:IsHidden="True"  >
                        </ListBox>
                        <ListBox x:Name="lb7Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.4,0" d:IsHidden="True"  >
                        </ListBox>
                        <ListBox x:Name="lb8Tab3" HorizontalContentAlignment="Stretch" FontSize="{StaticResource BUTTON_FONTSIZE}" Background="{x:Null}" BorderBrush="{x:Null}"  Margin="0,0,0.4,0" d:IsHidden="True"  >
                        </ListBox>
                    </StackPanel>
                </Border>
            </Grid>


        </TabItem>

    </TabControl>
</Grid>

You need to align the ListBox

<ListBox x:Name="lb2Tab3" HorizontalContentAlignment="Stretch"  
                          VerticalContentAlignment="Top"

If that does not work then post more of your XAML

So the problem was related with the fact that there are several listBox one on top of the other. I thought that making them hidden was enough but when I painted the second listBox in black I saw that it was not starting from the top (see image).

在此处输入图片说明

So the solution was to set Visibility = Collapsed for all the listbox that are not in use. Thanks to kirotab for putting me on the right path. Not sure if I can vote your comment.

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