Question

场合：

我有一个自定义WPF UserControl，它应该像大多数移动操作系统中的切换按钮一样。

点击一次后，它应该从一种状态变为另一种状态。

我的问题 有时候我不会按照自己想要的方式工作。矩形消失或红色/灰色背景矩形不会着色。

或者它们将被抽出两次左右。

我的代码 我有一个网格：在背景矩形中有一个Grid 并且3个“SelectRectangles”位于不同的列中。

 method: 'PUT',
    ^^^^^^
 SyntaxError: missing ) after argument list
 at createScript (vm.js:56:10)
 at Object.runInThisContext (vm.js:97:10)
 at Module._compile (module.js:542:28)
 at Object.Module._extensions..js (module.js:579:10)
 at Module.load (module.js:487:32)
 at tryModuleLoad (module.js:446:12)
 at Function.Module._load (module.js:438:3)
  at Module.runMain (module.js:604:10)
at run (bootstrap_node.js:389:7)
at startup (bootstrap_node.js:149:9)

我将可见性设置为隐藏/可见，因为移动一个Rectangle，碰巧遇到了同样的问题。

<UserControl x:Class="test.StatusControl"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         xmlns:local="clr-namespace:test"
         mc:Ignorable="d" 
         d:DesignHeight="20" d:DesignWidth="80">

    <UserControl.Resources>
        <!-- my dummy values -->

    <SolidColorBrush x:Key="BackgroundBrush" Color="DarkGray" />
    <SolidColorBrush x:Key="TSBackgroundBrush" Color="Gray" />
    <SolidColorBrush x:Key="TSBarBrush" Color="LightGreen" />
    <SolidColorBrush x:Key="AccentColorBrush1" Color="Khaki" />


        <Style TargetType="Rectangle" x:Key="SliderRectangleStyle">
            <Setter Property="Stroke" Value="{DynamicResource BackgroundBrush}" />
            <Setter Property="Fill" Value="{DynamicResource TSBarBrush}" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="0">
                    <Setter Property="Grid.Column" Value="0" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="1">
                    <Setter Property="Grid.Column" Value="2" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="2">
                    <Setter Property="Grid.Column" Value="4" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style TargetType="Rectangle" x:Key="LeftFillRectangleStyle">
            <Setter Property="Stroke" Value="{DynamicResource BackgroundBrush}" />
            <Setter Property="Fill" Value="{DynamicResource AccentColorBrush1}" />
            <Setter Property="Margin" Value="2,2,0,2" />
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="0">
                    <Setter Property="Visibility" Value="Collapsed" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="1">
                    <Setter Property="Grid.ColumnSpan" Value="2" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="2">
                    <Setter Property="Grid.ColumnSpan" Value="4" />
                </DataTrigger>
            </Style.Triggers>
        </Style>

        <Style x:Key="TextLabelStyle" TargetType="TextBlock">
            <Style.Triggers>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="0">
                    <Setter Property="Text" Value="Aus" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="1">
                    <Setter Property="Text" Value="Client" />
                </DataTrigger>
                <DataTrigger Binding="{Binding Status, RelativeSource={RelativeSource AncestorType=UserControl}}" Value="2">
                    <Setter Property="Text" Value="Finance Dept." />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="10"/>
            <ColumnDefinition Width="auto"/>
        </Grid.ColumnDefinitions>

        <Rectangle 
        Margin="5,2,5,2" 
        Grid.Row="0" 
        Grid.Column="0" 
        Grid.ColumnSpan="5" 
        Fill="{DynamicResource BackgroundBrush}" 
        Stroke="{DynamicResource TSBackgroundBrush}"
        />

        <TextBlock 
        Grid.Row="0" 
        Grid.Column="5" 
        Style="{StaticResource TextLabelStyle}"
        Margin="4,0,4,0" 
        />

        <Rectangle Style="{StaticResource LeftFillRectangleStyle}" />
        <Rectangle Style="{StaticResource SliderRectangleStyle}" />

        <!-- Overlay the slider area with three equal click areas -->
        <Grid Grid.Column="0" Grid.ColumnSpan="5">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Grid.Resources>
                <!-- 
            Because this style has no x:Key, it will apply to all Rectangles in this Grid 
            -->
                <Style TargetType="Rectangle" >
                    <!-- 
                Uncomment these setters to make sure the clickable areas are where 
                they should be.
                -->
                    <!--
                <Setter Property="Stroke" Value="Red" />
                <Setter Property="StrokeThickness" Value="1" />
               -->
                    <Setter Property="Fill" Value="Transparent" />
                    <EventSetter Event="PreviewMouseDown" Handler="StatusSelect_PreviewMouseDown" />
                </Style>
            </Grid.Resources>

            <Rectangle Grid.Column="0" />
            <Rectangle Grid.Column="1" />
            <Rectangle Grid.Column="2" />
        </Grid>
    </Grid>
</UserControl>

主窗口xaml：

  using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;

namespace test
{
    /// <summary>
    /// Interaktionslogik für StatusControl.xaml
    /// </summary>
    public partial class StatusControl : UserControl
    {
        public StatusControl()
        {
            InitializeComponent();
        }

        #region Status Property
        public int Status {
            get { return (int)GetValue(StatusProperty); }
            set { SetValue(StatusProperty, value); }
        }

        public static readonly DependencyProperty StatusProperty =
            DependencyProperty.Register(nameof(Status), typeof(int), typeof(StatusControl),new PropertyMetadata(0));
        #endregion Status Property

        private void StatusSelect_PreviewMouseDown(object sender, MouseButtonEventArgs e)
        {
            Status = Grid.GetColumn(sender as UIElement);
        }
    }
}

我尝试过的解决方案 看来他们只是不更新。我试过调用this.UpdateLayout（）但它没有帮助。有时候，几秒钟之后它也会重新绘制它自己的重点。有时候不是......

感谢您阅读/帮助！

Answer 1

首先，让我们为您的状态控件提供Status依赖项属性。我不知道你的控制权是什么，或者你所拥有的status变量是什么，所以我只是打电话给我的控件StatusControl。我认为使用Status的枚举而不是int（Good，Indifferent，Bad或Error，{{1} }，Warning或类似的东西）。但我现在要坚持你的Success。

int

public partial class StatusControl : UserControl { public StatusControl() { InitializeComponent(); } #region Status Property public int Status { get { return (int)GetValue(StatusProperty); } set { SetValue(StatusProperty, value); } } public static readonly DependencyProperty StatusProperty = DependencyProperty.Register(nameof(Status), typeof(int), typeof(StatusControl), new PropertyMetadata(0)); #endregion Status Property private void StatusSelect_PreviewMouseDown(object sender, MouseButtonEventArgs e) { Status = Grid.GetColumn(sender as UIElement); } }属性通过两个矩形样式中的Status来驱动用户控件中的更改。

Triggers动态重新定位表示滑块的单个矩形。
SliderRectangleStyle动态显示/隐藏并调整填充滑块的强调色区域的矩形。

您可能需要稍微调整边距以获得您原来的确切比例;当我撕开原来的XAML时，我很随意。

LeftFillRectangleStyle

wpf Rectangle在更改属性时表现得很奇怪

1 个答案: