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

本文关键字：移动 复选框 文本 右移 单击 按钮 | 更新日期: 2023-09-27 17:49:14

我对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"/>

例如，如果复选框对齐为

Channel 1 Channel 2 Channel 3 Channel 4 Channel 5然后选中通道3，点击<按钮，则新订单将生效第一频道第三频道第二频道第四频道第五频道

编辑:

本地命名空间添加为: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
    {
    }
}

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

我已经实现了一些小小的改进(删除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
{
}

通过将控件放置在网格中并动态移动它们，您的需求非常容易实现。首先把你的主网格分成5列。每列由一个CheckBox组成。现在，当每个复选框被选中或未选中时，您可以捕获事件并识别选中的复选框。当用户单击<按钮时，使用下面的代码更改复选框及其备用复选框的列:

你可以对你想要改变网格列值的对象调用SetValue: 

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

假设你想把第三个复选框移到左边

相关文章：