单击按钮将复选框和文本向左或向右移动

Question

我对 wpf 很陌生。我有 5 个复选框，每个复选框都有颜色选择器和文本。 我想选中一个复选框，然后单击 或 > 按钮将复选框与文本及其颜色选择器一起向左或向右移动。

<CheckBox Content="Channel 1" HorizontalAlignment="Left" Margin="42,50,0,33" Checked="CheckBox_Checked"/>
    <CheckBox Content="Channel 2" HorizontalAlignment="Left" Margin="170,50,0,0" VerticalAlignment="Top" Checked="CheckBox_Checked"/>
    <CheckBox Content="Channel 3" HorizontalAlignment="Left" Margin="292,50,0,35" Checked="CheckBox_Checked"/>
    <CheckBox Content="Channel 6" HorizontalAlignment="Left" Margin="668,49,0,0" VerticalAlignment="Top" Checked="CheckBox_Checked"/>
    <CheckBox Content="Channel 5" HorizontalAlignment="Left" Margin="541,50,0,0" VerticalAlignment="Top" Checked="CheckBox_Checked"/>
    <CheckBox Content="Channel 4" HorizontalAlignment="Left" Margin="422,51,0,33" Checked="CheckBox_Checked"/>
    <Button Content="&lt;" HorizontalAlignment="Left" Margin="10,44,0,31" Width="27" FontSize="14" FontWeight="Bold" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>
    <Button Content="&gt;" HorizontalAlignment="Left" Margin="795,44,0,31" Width="27" FontSize="14" FontWeight="Bold" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}"/>

    <c1:C1ColorPicker HorizontalAlignment="Left" Margin="245,46,0,0" VerticalAlignment="Top" Width="39" Height="19"/>
    <c1:C1ColorPicker HorizontalAlignment="Left" Margin="117,46,0,0" VerticalAlignment="Top" Width="39" Height="19"/>
    <c1:C1ColorPicker HorizontalAlignment="Left" Margin="369,46,0,0" VerticalAlignment="Top" Width="39" Height="19"/>
    <c1:C1ColorPicker HorizontalAlignment="Left" Margin="497,47,0,0" VerticalAlignment="Top" Width="39" Height="19"/>
    <c1:C1ColorPicker HorizontalAlignment="Left" Margin="616,47,0,0" VerticalAlignment="Top" Width="39" Height="19"/>
    <c1:C1ColorPicker HorizontalAlignment="Left" Margin="743,46,0,0" VerticalAlignment="Top" Width="39" Height="19"/>

例如，如果复选框对齐为

频道 1 频道 2 频道 3 频道 4 频道 5 我检查了频道 3 并单击了 按钮，然后新订单将是 频道 1 频道 3 频道 2 频道 4 频道 5

编辑：

本地命名空间添加为：xmlns:local ="clr-namespace:WpfApplication3"

自定义控件EnhancedCheckBoxControl：

using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;

namespace WpfApplication3
{
    public partial class EnhancedCheckBoxControl : CheckBox
    {

    }
}

Answer 1

我已经实现了一些小的改进（删除了margin 添加的自定义控件），还有更多可以改进的地方。

您的 XAML 文件：

<Window.Resources>
    <Style TargetType="StackPanel">
        <Setter Property="Orientation" Value="Horizontal" />
    </Style>

    <Style TargetType="local:EnhancedCheckBoxControl">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="local:EnhancedCheckBoxControl">
                    <ContentControl>
                        <StackPanel Orientation="Horizontal">
                            <CheckBox Content="{TemplateBinding Content}" IsChecked="{Binding IsChecked, RelativeSource={RelativeSource TemplatedParent}}" />
                            <c1:C1ColorPicker Width="39" Height="19"/>
                        </StackPanel >
                    </ContentControl>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Window.Resources>

<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="Auto" />
        <ColumnDefinition Width="*" />
        <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>

    <StackPanel x:Name="spToSort" Grid.Column="1">
        <local:EnhancedCheckBoxControl Content="Channel 1" />
        <local:EnhancedCheckBoxControl Content="Channel 2" />
        <local:EnhancedCheckBoxControl Content="Channel 3" />
        <local:EnhancedCheckBoxControl Content="Channel 4" />
        <local:EnhancedCheckBoxControl Content="Channel 5" />
        <local:EnhancedCheckBoxControl Content="Channel 6" />
    </StackPanel>

    <Button Content="&lt;" Grid.Column="0" Width="27" FontSize="14" FontWeight="Bold" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Click="Button_Left"/>
    <Button Content="&gt;" Grid.Column="2" Width="27" FontSize="14" FontWeight="Bold" Background="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" BorderBrush="{DynamicResource {x:Static SystemColors.HighlightBrushKey}}" Click="Button_Right"/>
</Grid>

移动背后的代码：

private IEnumerable<EnhancedCheckBoxControl> GetStackPanelsToMove()
{
    return spToSort.Children.OfType<EnhancedCheckBoxControl>()
        .Where(cb => cb.IsChecked.HasValue && cb.IsChecked.Value);
}

private void Button_Left(object sender, RoutedEventArgs e)
{
    IEnumerable<EnhancedCheckBoxControl> stackPanelsToMove = GetStackPanelsToMove()
        .OrderBy(sp => spToSort.Children.IndexOf(sp));

    foreach (var spToMove in stackPanelsToMove) {
        int position = spToSort.Children.IndexOf(spToMove);
        if (position <= 0) { continue; }

        spToSort.Children.Remove(spToMove);
        spToSort.Children.Insert(position - 1, spToMove);
    }
}

private void Button_Right(object sender, RoutedEventArgs e)
{
    IEnumerable<EnhancedCheckBoxControl> stackPanelsToMove = GetStackPanelsToMove()
        .OrderByDescending(sp => spToSort.Children.IndexOf(sp));

    foreach (var spToMove in stackPanelsToMove)
    {
        int position = spToSort.Children.IndexOf(spToMove);
        if (position >= spToSort.Children.Count - 1) { continue; }

        spToSort.Children.Remove(spToMove);
        spToSort.Children.Insert(position + 1, spToMove);
    }
}

自定义控件是一个空类，继承自CheckBox：

public class EnhancedCheckBoxControl : CheckBox
{
}

Answer 2

通过将控件放置在网格中并动态移动它们，您的要求很容易实现。首先将主网格分为 5 列。每列由一个 CheckBox 组成。现在，当每个复选框被检查或未选中时，您可以捕获事件并标识所选的复选框。当用户点击 按钮时，使用以下代码更改复选框的列及其备用复选框：

您可以在要更改网格列值的对象上调用 SetValue：

Checkbox3.SetValue(Grid.ColumnProperty, 2);
mainGrid.Children.Add(Checkbox3);
Checkbox2.SetValue(Grid.ColumnProperty, 3);
mainGrid.Children.Add(Checkbox2);

假设您尝试将第三个复选框移到左侧。