Question

在工作中我有几个页面，每个页面都有相同位置的按钮，并具有相同的属性。每个页面也有细微差别。为此，我们创建了一个userControl模板并将所有按钮放入其中，然后将该用户控件应用于所有页面。但是，现在很难访问按钮并从每个页面的xaml修改它们，因为它们位于页面上的UserControl内..... 如何优雅地访问按钮从每个页面？

我尝试过的事情：

目前，我们绑定了一堆依赖项属性。我不喜欢这个选项，因为我有很多按钮，需要控制这些按钮上的很多属性。结果是数以百计的依赖属性，当我们需要改变某些东西时，它就会变得非常糟糕。
另一种方法是使用样式。我一般都喜欢这种方法，但由于这些按钮位于另一个控件内部，因此很难对其进行修改，并且模板一次只适用于一个按钮。
Adam Kemp发布了关于让用户只插入他们自己的按钮here的帖子，这就是我目前正在尝试实施/修改的方法。不幸的是，我无法访问Xamarin。

虽然代码运行时插入了模板，但模板并未正确更新按钮。如果我在MyButton Setter中放置一个断点，我可以看到值实际上是一个空按钮，而不是我在主窗口中指定的按钮。我该如何解决这个问题？

这里有一些简化的代码：

我的模板UserControl＆＃39; xaml：

<UserControl x:Class="TemplateCode.Template"
     x:Name="TemplatePage"
     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"
     mc:Ignorable="d"
     d:DesignHeight="350"
     d:DesignWidth="525"
     DataContext="{Binding RelativeSource={RelativeSource Self}}"
     Background="DarkGray">

     <Grid>
          <Button x:Name="_button" Width="200" Height="100" Content="Template Button"/>
     </Grid>
</UserControl>

我的模板UserControl的代码背后：

using System.Windows.Controls;

namespace TemplateCode
{
    public partial class Template : UserControl
    {
        public static Button DefaultButton;

        public Template()
        {
             InitializeComponent();
        }

        public Button MyButton
        {
            get
            {
                 return _button;
            }
            set
            {
                _button = value; //I get here, but value is a blank button?!

                // Eventually, I'd like to do something like:
                // Foreach (property in value) 
                // {
                //     If( value.property != DefaultButton.property) )
                //     {
                //         _button.property = value.property;
                //     }
                // }
                // This way users only have to update some of the properties
            }
        }
    }
}

现在我想要使用它的应用程序：

<Window x:Class="TemplateCode.MainWindow"
    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"
    mc:Ignorable="d"

    xmlns:templateCode="clr-namespace:TemplateCode"

    Title="MainWindow"
    Height="350"
    Width="525"
    Background="LimeGreen"
    DataContext="{Binding RelativeSource={RelativeSource Self}}" >

    <Grid>
        <templateCode:Template>
            <templateCode:Template.MyButton>

                <Button Background="Yellow" 
                    Content="Actual Button"
                    Width="200" 
                    Height="100"/>

            </templateCode:Template.MyButton>
        </templateCode:Template>
    </Grid>
</Window>

现在守则背后：

Using System.Windows;
Namespace TemplateCode
{
    Public partial class MainWindow : Window
    {
        Public MainWindow()
        {
            InitializeComponent();
        }
    }
}

编辑虽然我想在模板 userControl中删除不必要的依赖项属性，但我还是想在按钮上设置绑定的属性。

Answer 1

您可以在Button上注册依赖关系属性UserControl，并在其PropertyChangedCallback中处理初始化。

<强> Template.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Collections.Generic;
using System.Windows.Markup.Primitives;

namespace TemplateCode
{
    public partial class Template : UserControl
    {
        public Template()
        {
            InitializeComponent();
        }

        public static readonly DependencyProperty ButtonProperty =
            DependencyProperty.Register("Button", typeof(Button), typeof(Template),
                new UIPropertyMetadata(new PropertyChangedCallback(ButtonChangedCallback)));

        public Button Button
        {
            get { return (Button)GetValue(ButtonProperty); }
            set { SetValue(ButtonProperty, value); }
        }

        public static List<DependencyProperty> GetDependencyProperties(Object element)
        {
            List<DependencyProperty> properties = new List<DependencyProperty>();
            MarkupObject markupObject = MarkupWriter.GetMarkupObjectFor(element);
            if (markupObject != null)
            {
                foreach (MarkupProperty mp in markupObject.Properties)
                {
                    if (mp.DependencyProperty != null)
                    {
                        properties.Add(mp.DependencyProperty);
                    }
                }
            }
            return properties;
        }

        private static void ButtonChangedCallback(object sender, DependencyPropertyChangedEventArgs args)
        {
            // Get button defined by user in MainWindow
            Button userButton     = (Button)args.NewValue;
            // Get template button in UserControl
            UserControl template  = (UserControl)sender;
            Button templateButton = (Button)template.FindName("button");
            // Get userButton props and change templateButton accordingly
            List<DependencyProperty> properties = GetDependencyProperties(userButton);
            foreach(DependencyProperty property in properties)
            {
                if (templateButton.GetValue(property) != userButton.GetValue(property))
                {
                    templateButton.SetValue(property, userButton.GetValue(property));
                }
            }
        }
    }
}

<强> Template.xaml

UserControl DataContext继承自父级，无需明确设置

<UserControl x:Class="TemplateCode.Template"
     x:Name="TemplatePage"
     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"
     mc:Ignorable="d"
     d:DesignHeight="350"
     d:DesignWidth="525"
     Background="DarkGray">

    <Grid>
        <Button x:Name="button" Width="200" Height="100" Content="Template Button"/>
    </Grid>
</UserControl>

<强> MainWindow.xaml

您设置了Button.Content而不是Button

<Window x:Class="TemplateCode.MainWindow"
    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"
    mc:Ignorable="d"

    xmlns:templateCode="clr-namespace:TemplateCode"

    Title="MainWindow"
    Height="350"
    Width="525">
    <Window.Resources>
        <Button x:Key="UserButton" 
                Background="Yellow" 
                Content="Actual Button"
                Width="200" 
                Height="100"
                />
    </Window.Resources>
    <Grid>
        <templateCode:Template Button="{StaticResource UserButton}"/>
    </Grid>
</Window>

编辑 - 绑定Button.Content

3种方法：

<强> 1。依赖属性

到目前为止最好的方法。为UserControl上的每个属性创建Button DP肯定是矫枉过正，但对于那些想要绑定到ViewModel / MainWindow DataContext的人来说，它是有道理的。

添加 Template.xaml.cs

public static readonly DependencyProperty TextProperty =
    DependencyProperty.Register("Text", typeof(string), typeof(Template));

public string Text
{
    get { return (string)GetValue(TextProperty); }
    set { SetValue(TextProperty, value); }
}

<强> Template.xaml

<UserControl x:Class="TemplateCode.Template"

     ...

     DataContext="{Binding RelativeSource={RelativeSource Self}}">
    <Grid>
        <Button x:Name="button" Width="200" Height="100" Content="{Binding Text}"/>
    </Grid>
</UserControl>

<强> MainWindow.xaml

<Window.Resources>
    <Button x:Key="UserButton" 
            Background="Yellow" 
            Width="200" 
            Height="100"
            />
</Window.Resources>
<Grid>
    <templateCode:Template 
        Button="{StaticResource UserButton}" 
        Text="{Binding DataContext.Txt, 
                       RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>

</Grid>

或者

<Window.Resources>
    <Button x:Key="UserButton" 
            Background="Yellow" 
            Content="Actual Button"
            Width="200" 
            Height="100"
            />
</Window.Resources>
<Grid>
    <templateCode:Template 
        Button="{StaticResource UserButton}"/>
</Grid>

价值优先：UserButton内容＆gt; DP Text，因此将内容设置为Resources获胜。

<强> 2。在ViewModel中创建按钮

MVVM纯粹主义者不喜欢这样，但您可以使用Binding标记代替StaticResource。

<强> MainWindow.xaml

<Grid>
    <templateCode:Template 
        Button="{Binding DataContext.UserButton, 
                         RelativeSource={RelativeSource AncestorType={x:Type Window}}}"/>
</Grid>

<强> 3。在代码中设置绑定

正如您已经注意到的那样，Txt中无法引用ViewModel道具（例如Resources），因为所有内容都已初始化。您仍然可以在以后的代码中执行此操作，但是要使用该错误进行验证会有点麻烦。

System.Windows.Data错误：4：找不到绑定源参考'RelativeSource FindAncestor， AncestorType ='System.Windows.Window'，AncestorLevel ='1''。 BindingExpression：路径= DataContext.Txt;的DataItem = NULL;目标要素是'Button'（Name =''）; target属性是'Content'（类型'Object'）

请注意，您需要在Content属性上定义完整路径（父级设置DataContext不会这样做。）

<强> MainWindow.xaml

<Window.Resources>
    <Button x:Key="UserButton" 
            Background="Yellow" 
            Width="200" 
            Height="100"
            Content="{Binding DataContext.Txt, 
                              RelativeSource={RelativeSource AncestorType={x:Type Window}}}"
            />
</Window.Resources>
<Grid>
    <templateCode:Template Button="{StaticResource UserButton}"/>
</Grid>

<强> Template.xaml.cs

private static void ButtonChangedCallback(object sender, DependencyPropertyChangedEventArgs args)
{
    // Get button defined by user in MainWindow
    Button userButton = (Button)args.NewValue;
    // Get template button in UserControl
    UserControl template = (UserControl)sender;
    Button templateButton = (Button)template.FindName("button");
    // Get userButton props and change templateButton accordingly
    List<DependencyProperty> properties = GetDependencyProperties(userButton);
    foreach (DependencyProperty property in properties)
    {
    if (templateButton.GetValue(property) != userButton.GetValue(property))
        templateButton.SetValue(property, userButton.GetValue(property));
    }
    // Set Content binding
    BindingExpression bindingExpression = userButton.GetBindingExpression(Button.ContentProperty);
    if (bindingExpression != null)
        templateButton.SetBinding(Button.ContentProperty, bindingExpression.ParentBinding);
}

Answer 2

而不是使用许多依赖属性，更喜欢样式方法。 Style包含Button控件的所有可用属性。

我会为UserControl中的每个按钮样式创建一个DependencyProperty。

public partial class TemplateUserControl : UserControl
{
    public TemplateUserControl()
    {
        InitializeComponent();
    }

    public static readonly DependencyProperty FirstButtonStyleProperty = 
        DependencyProperty.Register("FirstButtonStyle", typeof (Style), typeof (TemplateUserControl));

    public Style FirstButtonStyle
    {
        get { return (Style)GetValue(FirstButtonStyleProperty); }
        set { SetValue(FirstButtonStyleProperty, value); }
    }

    public static readonly DependencyProperty SecondButtonStyleProperty =
        DependencyProperty.Register("SecondButtonStyle", typeof (Style), typeof (TemplateUserControl));

    public Style SecondButtonStyle
    {
        get { return (Style)GetValue(SecondButtonStyleProperty); }
        set { SetValue(SecondButtonStyleProperty, value); }
    }
}

然后修改xaml按钮以选择这些样式：

<UserControl x:Class="MyApp.TemplateUserControl"
             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" 
             mc:Ignorable="d" 
             d:DesignHeight="200" d:DesignWidth="300"
             Background="DarkGray">
    <StackPanel>
        <Button x:Name="_button" Width="200" Height="100" 
                Style="{Binding Path=FirstButtonStyle, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
        <Button x:Name="_button2" Width="200" Height="100"
                Style="{Binding Path=SecondButtonStyle, RelativeSource={RelativeSource AncestorType=UserControl}}"/>
    </StackPanel>
</UserControl>

现在必须自定义按钮时，可以通过自定义样式实现：

<StackPanel>
    <StackPanel.Resources>
        <!--common theme properties-->
        <Style TargetType="Button" x:Key="TemplateButtonBase">
            <Setter Property="FontSize" Value="18"/>
            <Setter Property="Foreground" Value="Blue"/>
        </Style>

        <!--unique settings of the 1st button-->
        <!--uses common base style-->
        <Style TargetType="Button" x:Key="BFirst" BasedOn="{StaticResource TemplateButtonBase}">
            <Setter Property="Content" Value="1st"/>
        </Style>

        <Style TargetType="Button" x:Key="BSecond" BasedOn="{StaticResource TemplateButtonBase}">
            <Setter Property="Content" Value="2nd"/>
        </Style>
    </StackPanel.Resources>

    <myApp:TemplateUserControl FirstButtonStyle="{StaticResource BFirst}" 
                               SecondButtonStyle="{StaticResource BSecond}"/>
</StackPanel>

Answer 3

如果您可以将对按钮的更改分组到datacontext上的一个或多个属性，则可以使用DataTriggers：

<Button x:Name="TestButton">
    <Button.Style>
        <Style>
            <Style.Triggers>
                <DataTrigger Binding="{Binding IsButtonEnabled}" Value="True">
                    <Setter TargetName="TestButton" Property="Background" Value="Red" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Button.Style>
</Button>

您甚至可以在MultiDataTriggers中使用多个条件。

Answer 4

主要问题是在主窗口组件之前初始化模板组件。我的意思是在初始化模板类中的按钮之后设置主窗口中按钮的所有属性。因此，正如您所说的值设置为null。我想说的是关于初始化对象的序列。如果你按照以下方式制作技巧;

public partial class Template : UserControl
{
    private Button _btn ;

    public Template()
    {

    }

    public Button MyButton
    {
        get
        {
            return _button;
        }
        set
        {
            _btn = value;
            _button = value;
        }
    }
    protected override void OnInitialized(EventArgs e)
    {
        InitializeComponent();
        base.OnInitialized(e);

        this._button.Content = _btn.Content;
        this._button.Background = _btn.Background;
        this.Width = _btn.Width;
        this.Height = _btn.Height;
    }
}

毫无疑问，它会起作用。

Answer 5

另一个基于@Funk答案的选项是在模板上创建内容控件而不是按钮，然后将内容控件的内容绑定到后面代码中的ButtonProperty：

在模板上：

<ContentControl Content={Binding myButton} Width="200" Height="100"/>

在后面的模板代码中：

public static readonly DependencyProperty myButtonProperty =
        DependencyProperty.Register("Button", typeof(Button), typeof(Template),
            new UIPropertyMetadata(new PropertyChangedCallback(ButtonChangedCallback)));

然后在主窗口上：

<Window.Resources>
    <Button x:Key="UserButton" 
            Background="Yellow" 
            Content="Actual Button"
            />
</Window.Resources>
<Grid>
    <templateCode:Template myButton="{StaticResource UserButton}"/>
</Grid>

关于这一点的好处是Visual Studio足够聪明，可以在设计时显示此代码，并且整体代码更少。

您可以在内容控件或默认样式中为按钮设置常量（如位置，字体和颜色），然后仅修改所需的部件按钮。

Answer 6

一种选择是简单地使用＆lt;开始在xaml页面上编写C＃。！[CDATA [***]]＆gt;

在主窗口中，您将更改为：

<templateCode:Template x:Name="test">
    <x:Code><![CDATA[
        Void OnStartup()
        {
            test.MyButton.Content="Actual Button";
            test.MyButton.Background = new SolidColorBrush(Color.FromArgb(255,255,255,0));
        }
        ]]>
    </x:Code>

然后在Initialize Object（）之后调用OnStartup（）。

虽然这确实可以让您编辑xaml中的特定属性，但这与仅在其他人期望的代码中编写代码大致相同。

如何从xaml访问UserControl中的按钮？

6 个答案: