简体   繁体   English

如何从用户控件绑定或获取属性

[英]How to bind or get properties from User Control

have a bit of a problem understanding some usercontrol interaction: 在理解一些用户控件交互方面存在一些问题:

I've built this color picker. 我已经建立了这个颜色选择器。 I have four sliders that change the color in Red, Green, & Blue (RGB and all that) as well as its opacity(alpha). 我有四个滑块,可以更改红色,绿色和蓝色(RGB等)的颜色及其不透明度(alpha)。 When I slide these back and forth, I get a live response from the previewColor Rectangle(the fill color of the rectangle changes as I slide any of the sliders). 当我前后滑动这些滑块时,我会收到来自PreviewColor Rectangle的实时响应(当我滑动任何滑块时,矩形的填充颜色都会改变)。 All these elements are inside my user control. 所有这些元素都在我的用户控件中。

In my main window, I have two signigicant elements, a blank canvas and a "change canvas" button. 在主窗口中,我有两个重要元素,一个空白画布和一个“更改画布”按钮。 Ideally, when I play with the sliders in my user control and find a color i like, I would just click the ChangeCanvas button and the canvas background would change to match the current color of the previewRectangle. 理想情况下,当我在用户控件中使用滑块并找到我喜欢的颜色时,只需单击ChangeCanvas按钮,画布背景将更改为与PreviewRectangle的当前颜色匹配。

The problem is that I cannot figure out how to bind the current color of the previewRectangle to a button action that my canvas will accept. 问题是我无法弄清楚如何将PreviewRectangle的当前颜色绑定到画布将接受的按钮动作。 Is there any way to bind the background of my canvas to the fill of my rectangle via button action? 有什么方法可以通过按钮动作将画布的背景绑定到矩形的填充上吗? Or is it better to pass the color property from the usercontrol to the mainwindow? 还是将color属性从用户控件传递到主窗口更好?

Main Window XAML & Code 主窗口XAML和代码

<Window x:Class="C_ShapeCanvasV2.MainWindow"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:schafec="clr-namespace:C_ShapeCanvasV2.SControl"
    Title="ColorCanvas" Height="393" Width="729">
<Grid Background="Gray">
    <Canvas Name="MainCanvas" MouseLeftButtonDown="MainCanvas_MouseLeftButtonDown" ClipToBounds="True" MouseRightButtonDown="MainCanvas_MouseRightButtonDown" Background="White"  HorizontalAlignment="Left" Height="363" VerticalAlignment="Top" Width="305"/>
    <!-- user control -->
    <schafec:ColorControls x:Name="colorControls" Margin="330,21,23,189"/>
    <!-- user control -->
    <Button Name="ChangeCanvas" Click="ChangeCanvas_Click" Content="Change Canvas" HorizontalAlignment="Left" Margin="456,209,0,0" VerticalAlignment="Top" Width="158" />
    <Button Name="clearButton" Click="clearButton_Click" Content="Clear" HorizontalAlignment="Left" Margin="498,236,0,0" VerticalAlignment="Top" Width="75"/>

</Grid>

namespace C_ShapeCanvasV2
{

public partial class MainWindow : Window
{
    public MainWindow()
    {
        InitializeComponent();  
    }       
    //---------------------------------------------------------------------------------------------//


    private void ChangeCanvas_Click(object sender, RoutedEventArgs e)
    {
        //attempted -- not working
        //MainCanvas.Background = new SolidColorBrush(clr);
    }

    private void clearButton_Click(object sender, RoutedEventArgs e)
    {
        MainCanvas.Children.Clear();
        MainCanvas.Background = new SolidColorBrush(Colors.White);
    }

}
}

UserControl XAML & Code UserControl XAML和代码

 <UserControl x:Class="C_ShapeCanvasV2.SControl.ColorControls"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Height="153" Width="368">
<Grid Name="mainGrid" Background ="Gray" Margin="0,6,0,-6">


<!-- just an image under the previewRectangle to provide contrast for opacity purposes -->
    <Rectangle Name="underImage" HorizontalAlignment="Left" Height="58" Margin="24,52,0,0" Stroke="Black" VerticalAlignment="Top" Width="64">
        <Rectangle.Fill>
            <ImageBrush ImageSource ="/C_ShapeCanvasV2;component/Images/ops.png"/>
        </Rectangle.Fill>
    </Rectangle>


<!-- PreviewColor Rectangle -->
    <Rectangle Name="previewColor" HorizontalAlignment="Left" Height="58" Margin="24,52,0,0" Stroke="Black" VerticalAlignment="Top" Width="64"/>

    <Slider Name="redSlider" Minimum="0" ValueChanged="redSlider_ValueChanged" IsSnapToTickEnabled="True" Maximum="255" TickFrequency="1" HorizontalAlignment="Left" Margin="211,36,0,0" VerticalAlignment="Top" Width="104"/>
    <Slider Name="greenSlider" Minimum="0" ValueChanged="greenSlider_ValueChanged" IsSnapToTickEnabled="True" Maximum="255" TickFrequency="1"  HorizontalAlignment="Left" Margin="211,61,0,0" VerticalAlignment="Top" Width="104"  />
    <Slider Name="blueSlider"  Minimum="0" ValueChanged="blueSlider_ValueChanged" IsSnapToTickEnabled="True" Maximum="255" TickFrequency="1"  HorizontalAlignment="Left" Margin="211,86,0,0" VerticalAlignment="Top" Width="104"/>
    <Slider Name="alphaSlider" Minimum="0" ValueChanged="alphaSlider_ValueChanged" IsSnapToTickEnabled="True" Maximum="255" TickFrequency="1"  HorizontalAlignment="Left" Margin="211,111,0,0" VerticalAlignment="Top" Width="104"/>

    <Label Content="Red" HorizontalAlignment="Left" Margin="112,34,0,0" VerticalAlignment="Top"/>
    <Label Content="Green" HorizontalAlignment="Left" Margin="112,57,0,0" VerticalAlignment="Top"/>
    <Label Content="Blue" HorizontalAlignment="Left" Margin="112,82,0,0" VerticalAlignment="Top"/>
    <Label Content="Alpha" HorizontalAlignment="Left" Margin="112,107,0,0" VerticalAlignment="Top"/>

    <Label Name="redLabel" Content="{Binding ElementName= redSlider, Path=Value}" HorizontalAlignment="Left" Margin="318,32,0,0" VerticalAlignment="Top"/>
    <Label Name="greenLabel" Content="{Binding ElementName= greenSlider, Path=Value}" HorizontalAlignment="Left" Margin="318,59,0,0" VerticalAlignment="Top"/>
    <Label Name="blueLabel" Content="{Binding ElementName= blueSlider, Path=Value}" HorizontalAlignment="Left" Margin="318,82,0,0" VerticalAlignment="Top"/>
    <Label Name="alphaLabel" Content="{Binding ElementName= alphaSlider, Path=Value}" HorizontalAlignment="Left" Margin="318,107,0,0" VerticalAlignment="Top"/>

</Grid>

namespace C_ShapeCanvasV2.SControl
{
    public partial class ColorControls : UserControl
    {
        public Color clr;

    public ColorControls()
    {
        InitializeComponent();
    }

    private void changeColorSystem()
    {
        clr = Color.FromArgb(Convert.ToByte(alphaSlider.Value), Convert.ToByte(redSlider.Value), Convert.ToByte(greenSlider.Value), Convert.ToByte(blueSlider.Value));
        previewColor.Fill = new SolidColorBrush(clr);
    }

    //public void setColor(Color g)
    //{ 
    //    Color c = g;
    //}

    //public Color getColor()
    //{
    //    return clr;
    //}

    private void alphaSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        changeColorSystem();
    }

    private void blueSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        changeColorSystem();
    }

    private void greenSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        changeColorSystem();
    }

    private void redSlider_ValueChanged(object sender, RoutedPropertyChangedEventArgs<double> e)
    {
        changeColorSystem();
    }
}
}

That would not be clean in my opinion, but this piece of code should work: 在我看来,这并不干净,但是这段代码应该可以工作:

private void ChangeCanvas_Click(object sender, RoutedEventArgs e)
{
   MainCanvas.Background = colorControls.previewColor.Fill;
}

Still you should really inform yourself about MVVM architecture to do it in a more clean/testable way. 您仍然应该真正了解MVVM架构,以更干净/更可测试的方式进行操作。

Hope it helps. 希望能帮助到你。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM