如何绑定到资源

时间:2013-11-10 11:57:23

标签: c# wpf xaml user-controls

我正在努力解决对我而言的一些约束,这是一个复杂的设置。为了重新创建这种情况,我创建了一个新的WPF项目,该项目已经删除了除此问题之外的所有内容。

我的MainWindow在后面的代码中设置了datacontext(this.DataContext = this;)。在MainWindow中,有一个用户控件。我的研究表明,UserControl会自动从其父级继承DataContext。因此,为了使UserControl拥有它自己的DataContext,我可以使用类似于MyUserControlsCanvas.DataContext = this;的代码在代码中执行此操作。这可以按照需要工作

问题是,我的UserControl有一个类的引用,并且是通过RealtiveSource TemplatedParent继承的,因此我无法绑定。现在,我很欣赏这部分可能没有任何意义所以让我展示完整的代码(对不起,还有很多)。

MainWindow.xaml

<Window x:Class="BindingTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:myControl="clr-namespace:BindingTest"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <myControl:MyControl />
    </Grid>
</Window>

MainWindow.xaml.cs

    ...
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
            this.DataContext = this; // this is required although not shown why in this example
        }
    }

MyControl.xaml

<UserControl x:Class="BindingTest.MyControl"
             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:myControl="clr-namespace:BindingTest"
             mc:Ignorable="d" 
             d:DesignHeight="300" d:DesignWidth="300">
    <Grid>
        <Canvas>
            <Canvas.Resources>
                <ControlTemplate x:Key="ResizeDecoratorTemplate" TargetType="{x:Type Control}">
                    <Grid DataContext="{Binding RelativeSource={RelativeSource TemplatedParent}}">
                        <Grid.Background>
                            <SolidColorBrush Color="LightSkyBlue" Opacity=".1"></SolidColorBrush>
                        </Grid.Background>
                        <myControl:MoveMe Width="3" Test="{Binding HOW_DO_I_BIND_HERE}" Cursor="SizeWE" Margin="-2 0 0 0" VerticalAlignment="Stretch" HorizontalAlignment="Left" BorderThickness="2" BorderBrush="LightGreen"/>
                    </Grid>
                </ControlTemplate>
            </Canvas.Resources>
            <ContentControl Width="130"
                    MinWidth="50"
                    x:Name ="MyCanvas"
                    MinHeight="50"
                    Canvas.Top="0"
                    Canvas.Left="1"
                    Template="{StaticResource ResizeDecoratorTemplate}" />
        </Canvas>
    </Grid>
</UserControl>

MyControl.xaml.cs

    ...
    public partial class MyControl : UserControl
    {
        public MyControl()
        {
            InitializeComponent();
            MyCanvas.DataContext = this;
            this.ValueOfLeftBorder = 5;
        }

        //Dependancy properties, properties and methods

        public double ValueOfLeftBorder { get; set; }
        public double ValueOfRightBorder { get; set; }
    }

MoveMe.cs

    ...
    public class MoveMe : Thumb
    {
        public double Test
        {
            get { return (double)GetValue(TestProperty); }
            set { SetValue(TestProperty, value); }
        }

        public static readonly DependencyProperty TestProperty = DependencyProperty.Register(
           "Test",
           typeof(double),
           typeof(MainWindow));    

        public MoveMe()
        {
            base.DragDelta += this.ResizeThumb_DragDelta;
        }

        private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
        {
            //Logic
            MessageBox.Show("I Moved");
        }
    }

在MyControl.xaml中,我有以下代码

<myControl:MoveMe Width="3" Test="{Binding HOW_DO_I_BIND_HERE}" Cursor="SizeWE" Margin="-2 0 0 0" VerticalAlignment="Stretch" HorizontalAlignment="Left" BorderThickness="2" BorderBrush="LightGreen"/>

我正在尝试绑定到Test。

我的主要目标是找到这个可移动项目的Y位置。我正在创建一个时间轴,我希望能够选择起点和终点。这是目前看起来像的屏幕截图。请注意,这项工作正常,我需要知道开始的Y位置(浅绿色垂直线)和(深绿色垂直线)。

enter image description here

1 个答案:

答案 0 :(得分:1)

我不确定我理解你的目的,但是如果你有一个像我这样的MoveMe xaml:

<UserControl...>
    <Thumb x:Name="root" DragDelta="ResizeThumb_DragDelta">
        <Thumb.Template>
            <ControlTemplate>
                <Rectangle Fill="Blue"/>
            </ControlTemplate>
        </Thumb.Template>
    </Thumb>
</UserControl>

背后的代码
    public double Test
    {
        get { return (double)GetValue(TestProperty); }
        set { SetValue(TestProperty, value); }
    }
    public static readonly DependencyProperty TestProperty = DependencyProperty.Register(
        "Test",
        typeof(double),
        typeof(MoveMe));

    private void ResizeThumb_DragDelta(object sender, DragDeltaEventArgs e)
    {
        Margin = new Thickness(Margin.Left + e.HorizontalChange,0,0,0);
        Test = Margin.Left;
        //or resize ...
    }

和MyControl xaml一样:

<Grid>
    <Grid.Background>
        <SolidColorBrush Color="LightSkyBlue" Opacity=".1"></SolidColorBrush>
    </Grid.Background>
    <myControl:MoveMe Width="30" Cursor="SizeWE" 
Test="{Binding RelativeSource={RelativeSource AncestorType=myControl:MyControl}, Path=ValueOfLeftBorder, Mode=OneWayToSource}"
Margin="-2 0 0 0" VerticalAlignment="Stretch" HorizontalAlignment="Left" BorderThickness="2" 
BorderBrush="LightGreen"/>
</Grid>

通过拖动ValueOfLeftBorder

来保持MoveMe的最新状态