Question

我对wpf很新。我有5个复选框，每个复选框都有颜色选择器和文本。我想选中一个复选框，然后点击＆lt; 或＆gt; 按钮，向左或向右移动复选框以及文字及其颜色选择器。

<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并点击了＆lt; 按钮，然后新订单就会出现通道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。现在，当选中或取消选中每个复选框时，您可以捕获事件并识别所选复选框。当用户点击＆lt; 按钮时，请使用以下代码更改复选框及其备用复选框的列：

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

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

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

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

2 个答案: