如何從用戶控件綁定或獲取屬性

Question

在理解一些用戶控件交互方面存在一些問題：

我已經建立了這個顏色選擇器。 我有四個滑塊，可以更改紅色，綠色和藍色（RGB等）的顏色及其不透明度（alpha）。 當我前后滑動這些滑塊時，我會收到來自PreviewColor Rectangle的實時響應（當我滑動任何滑塊時，矩形的填充顏色都會改變）。 所有這些元素都在我的用戶控件中。

在主窗口中，我有兩個重要元素，一個空白畫布和一個“更改畫布”按鈕。 理想情況下，當我在用戶控件中使用滑塊並找到我喜歡的顏色時，只需單擊ChangeCanvas按鈕，畫布背景將更改為與PreviewRectangle的當前顏色匹配。

問題是我無法弄清楚如何將PreviewRectangle的當前顏色綁定到畫布將接受的按鈕動作。 有什么方法可以通過按鈕動作將畫布的背景綁定到矩形的填充上嗎？ 還是將color屬性從用戶控件傳遞到主窗口更好？

主窗口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和代碼

 <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();
    }
}
}

Answer 1

在我看來，這並不干凈，但是這段代碼應該可以工作：

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

您仍然應該真正了解MVVM架構，以更干凈/更可測試的方式進行操作。

希望能幫助到你。