列表框對齊方式WPF中的復選框

Question

我將復選框添加到了列表框中，但是它們並沒有按照我的意願對齊。 這是我的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>

顯示了復選框，但問題是它們“粘”在我的文本塊的內容上。 我想將復選框移動到列表框的右側，並希望它們像將復選框列添加到datagrid或listview一樣對齊。 如何處理？

更新：

<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

您的布局錯誤。 StackPanel Orientation="Horizontal"不會水平延伸到其容器。

通過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>

還要確保您的ListBoxItem被拉伸：

編輯：

我的意思是將這種樣式設置為ListBox.ItemContainerStyle ，如下所示：

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

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

否則，ListBox將“認為”您正在嘗試將Style設置為其中的Item 。

Answer 2

設置保證金

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

要么

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