列表框对齐方式WPF中的复选框

Question

I added checkboxes to my listbox but they are not aligned as I want to. Here is my XAML :

<ListBox ItemsSource="{Binding Path= Reminders}" Grid.Row="2" Height="250" Width="250" Name="reminderListBox" HorizontalAlignment="Left" SelectedItem="{Binding Path=Reminder, UpdateSourceTrigger=PropertyChanged}" >                                   
   <ListBox.ItemTemplate>
      <DataTemplate>
         <StackPanel Orientation="Horizontal">                                               
            <Image Grid.Column="0" Source="/WPFPanErpLite;component/Images/bullet.png" />
            <TextBlock Grid.Column="1" Text="{Binding Text}" FontSize="15"  Foreground="#003366" />
            <CheckBox Grid.Column="2" Name="IsDone" HorizontalAlignment="Right" />                                                
         </StackPanel>
      </DataTemplate>
   </ListBox.ItemTemplate>
</ListBox>

Checkboxes are shown but problem is that they "stick" to content of my textblock. I want to move my checkboxes to right edge of my listbox, and want them to be aligned like when you add checkbox column to datagrid or listview. How to manage this?

UPDATE:

<ListBox ItemsSource="{Binding Path= Reminders}" Grid.Row="2" Height="250" Width="250" Name="reminderListBox" HorizontalAlignment="Left" SelectedItem="{Binding Path=Reminder, UpdateSourceTrigger=PropertyChanged}" >
                                <Style TargetType="ListBoxItem">
                                    <Setter Property="HorizontalAlignment" Value="Stretch"/>
                                    <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
                                </Style>
                                <ListBox.ItemTemplate>
                                    <DataTemplate>
                                        <DockPanel>
                                            <Image DockPanel.Dock="Left" Source="/WPFPanErpLite;component/Images/bullet.png" />                                                
                                            <CheckBox DockPanel.Dock="Right"  Name="IsDone" HorizontalAlignment="Right" />
                                            <TextBlock Text="{Binding Text}" FontSize="15"  Foreground="#003366" />
                                        </DockPanel>
                                    </DataTemplate>
                                </ListBox.ItemTemplate>
                            </ListBox>

Answer 1

Your layout is wrong. a StackPanel Orientation="Horizontal" will NOT stretch horizontally to it's container.

Change that by a DockPanel :

 <DockPanel>                                               
     <Image DockPanel.Dock="Left" Source="/WPFPanErpLite;component/Images/bullet.png" />
     <CheckBox DockPanel.Dock="Right" />                                                
     <TextBlock Text="{Binding Text}" FontSize="15"  Foreground="#003366" />
 </DockPanel>

Also make sure your ListBoxItem s are stretched:

Edit:

I meant that you set this style as the ListBox.ItemContainerStyle , like so:

<ListBox>
    <ListBox.ItemContainerStyle>
       <Style TargetType="ListBoxItem">
           <Setter Property="HorizontalAlignment" Value="Stretch"/>
           <Setter Property="HorizontalContentAlignment" Value="Stretch"/>
       </Style>
    </ListBox.ItemContainerStyle>

    <!-- ... -->
</ListBox>

Otherwise, the ListBox will "think" that you're trying to set the Style as an Item inside it.

Answer 2

Set Margin

<CheckBox Grid.Column="2" Name="IsDone" Margin="10,0,0,0"/>

Or

<Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="Auto"/>
                        <ColumnDefinition Width="20"/>
                    </Grid.ColumnDefinitions>
                    <Image Grid.Column="0" Source="/WPFPanErpLite;component/Images/bullet.png" />
                    <TextBlock Grid.Column="1" Text="{Binding OwnerId}" FontSize="15"  Foreground="#003366" />
                    <CheckBox Grid.Column="2" Name="IsDone" HorizontalAlignment="Right" Background="Red"/>
                </Grid>