如何创建可重用的UserControl并为其绑定命令？

问题描述：

我试图绑定一个可重用的按钮在一个carusel，我想要实现的是一个添加让我们说6个按钮每个按钮将有一个命令，按照按钮名称将导航到正确的页面。如何创建可重用的UserControl并为其绑定命令？

我能做到这一点通过这样做：

<toolkitcontrols:Carousel x:Name="NavigationMenuCarouselPanel" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" 
             Orientation="Horizontal" 
             ItemsSource="{x:Bind ViewModel.MenuList, Mode=OneWay}" 
             ItemMargin="25" 
             ItemDepth="160" 
             ItemRotationX="180" 
             ItemRotationY="25" 
             ItemRotationZ="0" 
             SelectedIndex="2" 
             Grid.Row="1"> 
       <toolkitcontrols:Carousel.EasingFunction> 
        <CubicEase EasingMode="EaseOut"/> 
       </toolkitcontrols:Carousel.EasingFunction> 
        <Button Command="{x:Bind ViewModel.NavigateToPage1, Mode=OneWay}" 
          Content="{x:Bind ViewModel.Name, Mode=OneWay}"/> 
      </toolkitcontrols:Carousel>

如果我这样做，我会添加5个按钮和我得写为每个按钮的特性。

所以不是我想用一个用户控件，只是写的是这样的：

<toolkitcontrols:Carousel x:Name="NavigationMenuCarouselPanel" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" 
             Orientation="Horizontal" 
             ItemsSource="{x:Bind ViewModel.MenuList, Mode=OneWay}" 
             ItemMargin="25" 
             ItemDepth="160" 
             ItemRotationX="180" 
             ItemRotationY="25" 
             ItemRotationZ="0" 
             SelectedIndex="2" 
             Grid.Row="1"> 
       <toolkitcontrols:Carousel.EasingFunction> 
        <CubicEase EasingMode="EaseOut"/> 
       </toolkitcontrols:Carousel.EasingFunction> 
       <toolkitcontrols:Carousel.ItemTemplate> 
        <DataTemplate x:DataType="data:ButtonInfo"> 
         <usercontrolvm:NavigationMenuButtonTemplate NavigateToPageCommand="{Binding NavigateToPageCommand}"/> 
        </DataTemplate> 
       </toolkitcontrols:Carousel.ItemTemplate> 
      </toolkitcontrols:Carousel>

但我已经失败了这样做，我发现了一些教程，但都按照我的理解将让我写这个喜欢的代码：

<usercontrolvm:NavigationMenuButtonTemplate NavigateToPageCommand="{Binding NavigateToPageCommand}"/>

喜欢6次，我不知道它将如何将DataType的DataTemplate为我的属性列表。

这是我UserControl.xaml.cs

public sealed partial class NavigationMenuButtonTemplate : UserControl 
{ 
    public ButtonInfo ButtonInfo => (DataContext as ButtonInfo); 

    public NavigationMenuButtonTemplate() 
    { 
     this.InitializeComponent(); 
     Loaded += NavigationMenuButtonTemplate_Loaded; 
    } 

    private void NavigationMenuButtonTemplate_Loaded(object sender, RoutedEventArgs e) 
    { 
     Bindings.Update(); 
    } 

    public DelegateCommand NavigateToPageCommand 
    { 
     get { return (DelegateCommand)GetValue(NavigateToPageCommandProperty); } 
     set { SetValue(NavigateToPageCommandProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for NavigateToPageCommand. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty NavigateToPageCommandProperty = 
     DependencyProperty.Register("NavigateToPageCommand", 
      typeof(DelegateCommand), 
      typeof(NavigationMenuButtonTemplate), 
      new PropertyMetadata(0)); 
}

这是我ButtonInfo.cs

public class ButtonInfo 
{ 
    public string Symbol { get; set; } 
    public string FontFamily { get; set; } 
    public string MenuName { get; set; } 
    public string BenefitKind { get; set; } 
    public string Status { get; set; }   
}

，这是我UserControl.xaml

<Button x:Name="NavigationMenuTemplate" 
      Width="300" 
      Height="300" 
      Command="{Binding NavigateToPageCommand, ElementName=root, Mode=OneWay}"> 
     <Grid x:Name="ButtonLayout"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 
      <TextBlock x:Name="NavigationMenuIconTextBlock" 
         Grid.Row="0" 
         Grid.Column="0" 
         Grid.ColumnSpan="2" 
         FontFamily="{x:Bind ButtonInfo.FontFamily, Mode=OneWay, FallbackValue='Webdings'}" 
         Text="{x:Bind ButtonInfo.Symbol, Mode=OneWay, FallbackValue='&#x91;'}" 
         FontSize="150" 
         Foreground="Black" 
         VerticalAlignment="Center" 
         HorizontalAlignment="Center"/> 
      <TextBlock x:Name="NavigationMenuButtonNameTextBlock" 
         Grid.Row="1" 
         Grid.Column="0" 
         Grid.ColumnSpan="2" 
         Text="{x:Bind ButtonInfo.MenuName, Mode=OneWay, FallbackValue='CALCULADORA JORNADAS EXTRAORDINARIAS'}" 
         FontSize="12" 
         Foreground="Black" 
         HorizontalAlignment="Center"/> 
      <TextBlock x:Name="NavigationMenuButtonBenefitKindTextBlock" 
         Grid.Row="2" 
         Grid.Column="0" 
         Text="{x:Bind ButtonInfo.BenefitKind, Mode=OneWay, FallbackValue='Subscripción'}" 
         FontSize="10" 
         Foreground="Black" 
         HorizontalAlignment="Left"/> 
      <TextBlock x:Name="NavigationMenuButtonStatusTextBlock" 
         Grid.Row="2" 
         Grid.Column="1" 
         Text="{x:Bind ButtonInfo.Status, Mode=OneWay, FallbackValue='Vigente'}" 
         FontSize="10" 
         Foreground="Black" 
         HorizontalAlignment="Right"/> 
     </Grid>    
    </Button>

能有人帮助我请指点我正确的方向。我错过了什么？

所有我能理解你不想定义按钮或usercontrols 6次。如果用户控件是一种可以基于绑定输入填充UI的项目控件，那将是可能的。在你的情况下，用户控件只保存1个按钮，这将不起作用。 – Dilmah

当您使用UWP时，您可以在Click中使用'x：bind'并且您可以清除命令。 – lindexi

这可能是你正在寻找的https://github.com/StuartSmith/UWP-Template10-Carousel-Sample。 –

答

您的问题中的ItemTemplate方法实际上是在正确的轨道上。

最后，你的XAML将类似于以下（只有少数属性包括在内，但你的想法）的东西 -

<toolkitcontrols:Carousel ItemsSource="{x:Bind ButtonInfoCollection}"> 
    <toolkitcontrols:Carousel.ItemTemplate> 
     <DataTemplate x:DataType="local:ButtonInfo"> 
      <local:NavigationMenuButton NavigateToPageCommand="{Binding DataContext.NavigateToPageCommand, ElementName=MyPageName}" 
             NavigateToPageCommandParameter="{x:Bind PageType}" 
             MenuName="{x:Bind MenuName}" 
             SymbolPath="{x:Bind Symbol}" /> 
     </DataTemplate> 
    </toolkitcontrols:Carousel.ItemTemplate> 
</toolkitcontrols:Carousel>

随着结构之上记，你只要需要在NavigationMenuButton用户控件中将这些属性公开为依赖项属性。请参阅下面一个简单的例子 -

NavigationMenuButton XAML

<UserControl x:Class="DesignTest.NavigationMenuButton"> 

    <!--If any of the properties can be updated, change the binding Mode to OneWay--> 
    <Button Command="{x:Bind NavigateToPageCommand, Mode=OneWay}" CommandParameter="{x:Bind NavigateToPageCommandParameter}"> 
     <Grid> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="20" /> 
       <ColumnDefinition /> 
      </Grid.ColumnDefinitions> 

      <Image x:Name="SymbolImage" Stretch="UniformToFill" /> 
      <TextBlock Text="{x:Bind MenuName, FallbackValue='JORNADAS EXTRAORDINARIAS', TargetNullValue='JORNADAS EXTRAORDINARIAS'}" Grid.Column="1" /> 
     </Grid> 
    </Button> 
</UserControl>

NavigationMenuButton代码隐藏

public sealed partial class NavigationMenuButton : UserControl 
{ 
    public NavigationMenuButton() 
    { 
     InitializeComponent(); 
    } 

    public ICommand NavigateToPageCommand 
    { 
     get => (ICommand)GetValue(NavigateToPageCommandProperty); 
     set => SetValue(NavigateToPageCommandProperty, value); 
    } 
    public static readonly DependencyProperty NavigateToPageCommandProperty = DependencyProperty.Register(
     "NavigateToPageCommand", typeof(ICommand), typeof(NavigationMenuButton), new PropertyMetadata(null)); 

    public object NavigateToPageCommandParameter 
    { 
     get => GetValue(NavigateToPageCommandParameterProperty); 
     set => SetValue(NavigateToPageCommandParameterProperty, value); 
    } 
    public static readonly DependencyProperty NavigateToPageCommandParameterProperty = DependencyProperty.Register(
     "NavigateToPageCommandParameter", typeof(object), typeof(NavigationMenuButton), new PropertyMetadata(null)); 

    public string MenuName 
    { 
     get => (string)GetValue(MenuNameProperty); 
     set => SetValue(MenuNameProperty, value); 
    } 
    public static readonly DependencyProperty MenuNameProperty = DependencyProperty.Register(
     "MenuName", typeof(string), typeof(NavigationMenuButton), new PropertyMetadata(null)); 

    public string SymbolPath 
    { 
     get => (string)GetValue(SymbolPathProperty); 
     set => SetValue(SymbolPathProperty, value); 
    } 
    public static readonly DependencyProperty SymbolPathProperty = DependencyProperty.Register(
     "SymbolPath", typeof(string), typeof(NavigationMenuButton), new PropertyMetadata(null, (s, e) => 
     { 
      // We don't do the x:Bind for this property in XAML because the Image control's Source property 
      // doesn't accept a string but a BitmapImage, so one workaround is to do the conversion here. 

      var self = (NavigationMenuButton)s; 
      var image = self.SymbolImage; 
      var symbolPath = (string)e.NewValue; 

      image.Source = new BitmapImage(new Uri(self.BaseUri, symbolPath ?? "/Assets/default_path")); 
     })); 
}

注意你需要在你的ButtonInfo类导航PageType属性目的。

public Type PageType { get; set; }

我个人不喜欢具有在项目级别（即，在ButtonInfo类）中定义的导航命令，相反，我使用ElementName在Carousel的数据模板结合来搜索一个水平和绑定到页面的DataContext（页面的ViewModel）中定义的NavigateToPageCommand。

这意味着该ViewModel将同时拥有ButtonInfoCollection和NavigateToPageCommand像下面定义 -

public ObservableCollection<ButtonInfo> ButtonInfoCollection { get; } = new ObservableCollection<ButtonInfo> 
{ 
    new ButtonInfo { MenuName = "New Menu", PageType = typeof(BlankPage1), Symbol = "/Assets/StoreLogo.png" } 
}; 

public DelegateCommand<Type> NavigateToPageCommand { get; } = new DelegateCommand<Type>(type => 
    App.Frame.Navigate(type));

我希望这一切才有意义。祝你好运！

美丽的答案，我想我也喜欢我的答案，但在我看来你的建筑非常漂亮。感谢分享！ –

答

好的，Firstable to Dilmah总是可以在任何itemTemplate中构建一个可重用的用户控件。我会告诉你现在和在这里。

我已经想出了两个解决方案，第一个解决方案，它激发了我在阅读大量关于databing {x：Bind}和{Binding}标记后寻找的内容，我可以学习如何创建一个可重用的UserControlTemplate

1号液

首先，我会告诉你如何创建一个导航菜单，包括carusel控制，它可以在NuGet包Microsoft.Toolkit.Uwp.UI.Control找到

所以这是我的代码现在在我的MainMenuPage参考carusel控制：

<toolkitcontrols:Carousel x:Name="NavigationMenuCarouselPanel" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" 
             Orientation="Horizontal" 
             ItemsSource="{x:Bind ViewModel.NavMenuButtonVMs}" 
             ItemMargin="25" 
             ItemDepth="160" 
             ItemRotationX="180" 
             ItemRotationY="25" 
             ItemRotationZ="0" 
             SelectedIndex="0" 
             Grid.Row="1"> 
       <toolkitcontrols:Carousel.EasingFunction> 
        <CubicEase EasingMode="EaseOut"/> 
       </toolkitcontrols:Carousel.EasingFunction> 
       <toolkitcontrols:Carousel.ItemTemplate> 
        <DataTemplate> 
         <usercontrolvm:NavigationMenuButtonTemplate/> 
        </DataTemplate> 
       </toolkitcontrols:Carousel.ItemTemplate>     
      </toolkitcontrols:Carousel>

这段代码的这一重要组成部分，是的ItemSource属性，它是X：绑定到我的NavMenuButtonVms的ObservableCollection，和我的用户被包裹withing Carousel.ItemTemplate和DataTemplate的标签这将使得我们能够为我们的重用代码并在我们的列表中创建N个控件。

下一个是我为我的MainMenuPage视图模型：

public class MainMenuPageViewModel : Mvvm.ViewModelBase 
{ 
    ObservableCollection<NavigationMenuButtonTemplateViewModel> _NavMenuButtonVMs = default(ObservableCollection<NavigationMenuButtonTemplateViewModel>); 

    public MainMenuPageViewModel() 
    { 
     Shell.HamburgerMenu.IsFullScreen = false; 
     NavMenuButtonVMs = GetNavMenuButtonInfo(); 
    } 

    public string Title => GetLocalizeString("MainMenuPageViewModelTitle"); 
    public ObservableCollection<NavigationMenuButtonTemplateViewModel> NavMenuButtonVMs 
    { 
     get { return _NavMenuButtonVMs; } 
     private set { Set(ref _NavMenuButtonVMs, value); } 
    } 

    public override Task OnNavigatedToAsync(object parameter, NavigationMode mode, IDictionary<string, object> state) 
    { 
     NavigationService.ClearHistory(); 
     return base.OnNavigatedToAsync(parameter, mode, state); 
    }  
}

正如你可以看到我初始化我的构造函数中我的ObservableCollection。 GetNavMenuButton（）方法是Helpers命名空间中的一个静态类，但我会告诉你代码，以便你可以对如何种子列表有所了解，也可以注意到我没有调用静态类，因为我使用C＃6.0语法，你可以直接在你的类中调用静态方法。

，你可以添加一个using语句静态类像这样的：

using static Ceneam.Helpers.NavigationMenuButtonViewModelHelper;

这个声明，您可以使用这样一个静态方法：

GetNavMenuButtonInfo();

，而不是这样的：

NavigationMenuButtonViewModelHelper.GetNavMenuButtonInfo();

我解释过这种情况，如果你不明白我的代码。

然后我将创建我的用户控件，我将向您展示xaml，xaml.cs以及viewmodel。注意usercontrol中的绑定标记，因为您必须使用x：绑定在可重用的用户控件中进行绑定。

这是我NavigationMenuButtonTemplate.xaml

<UserControl 
x:Class="Ceneam.UserControlViews.NavigationMenuButtonTemplate" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
xmlns:local="using:Ceneam.UserControlViews" 
xmlns:vm="using:Ceneam.ViewModels" 
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
mc:Ignorable="d" 
d:DesignHeight="400" 
d:DesignWidth="400"> 

<Grid VerticalAlignment="Center" 
     HorizontalAlignment="Center">   
    <Grid.RowDefinitions> 
     <RowDefinition Height="Auto"/> 
    </Grid.RowDefinitions> 
    <Grid.ColumnDefinitions> 
     <ColumnDefinition Width="Auto"/> 
    </Grid.ColumnDefinitions> 

    <Button x:Name="NavigationMenuTemplate" 
      Command="{Binding NavigateToPageCommand, Mode=OneWay}"> 
     <Grid x:Name="ButtonLayout"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="*"/> 
       <RowDefinition Height="Auto"/> 
       <RowDefinition Height="Auto"/> 
      </Grid.RowDefinitions> 
      <Grid.ColumnDefinitions> 
       <ColumnDefinition Width="*"/> 
       <ColumnDefinition Width="*"/> 
      </Grid.ColumnDefinitions> 

      <Image x:Name="NavigationMenuIconImage" 
        Source="{Binding ButtonInfo.Symbol, Mode=OneWay, FallbackValue='ms-appx:///Assets/AssetsMainMenuPage/OverTimeMoneyWhite256x256.png'}" 
        PointerEntered="NavigationMenuIconImage_PointerEntered"/> 
      <TextBlock x:Name="NavigationMenuButtonNameTextBlock" 
         Text="{Binding ButtonInfo.MenuName, Mode=OneWay, FallbackValue='JORNADAS EXTRAORDINARIAS'}"/> 
      <TextBlock x:Name="NavigationMenuButtonBenefitKindTextBlock" 
         Text="{Binding ButtonInfo.BenefitKind, Mode=OneWay, FallbackValue='Subscripción'}"/> 
      <TextBlock x:Name="NavigationMenuButtonStatusTextBlock" 
         Text="{Binding ButtonInfo.Status, Mode=OneWay, FallbackValue='Vigente'}"/> 
     </Grid>    
    </Button> 
</Grid>

，你可以看到我只使用绑定标记和的原因是因为我用的视图模型与参数的权利，我不得不创建在我的用户的依赖：

public class NavigationMenuButtonTemplateViewModel : Mvvm.ViewModelBase 
{ 
    ButtonInfo _ButtonInfo = default(ButtonInfo); 

    public NavigationMenuButtonTemplateViewModel() { } 
    public NavigationMenuButtonTemplateViewModel(ButtonInfo buttonInfo) 
    { 
     ButtonInfo = new ButtonInfo 
     { 
      BenefitKind = buttonInfo.BenefitKind, 
      Status = buttonInfo.Status, 
      MenuName = buttonInfo.MenuName, 
      Symbol = buttonInfo.Symbol 
     }; 
    } 

    public ButtonInfo ButtonInfo 
    { 
     get { return _ButtonInfo; } 
     set { Set(ref _ButtonInfo, value); } 
    } 

    public DelegateCommand NavigateToPageCommand => new DelegateCommand(async() => { await ExecuteNavigateToPageCommand(); }); 

    private async Task ExecuteNavigateToPageCommand() 
    { 
     var message = new MessageDialog("Test"); 
     await message.ShowAsync(); 
    } 
}

，因为你创建的视图模型参数的构造器我不是能够创造一个强类型绑定与构造uctor这是让我留下后面的主要原因：绑定标记为我的用户控件，这意味着你不能在事件上使用x：bind方法。您将不得不在usercontrol的xaml.cs文件中使用样式化方法。

如果您在声明XAML是这样的：

<UserControl.DataContext> 
    <vm:usercontrol x:Name=ViewModel/> 
<UserControl.DataContext>

它将始终触发参数的构造函数摆脱你的初始化值的更差越来越NullReferenceException异常，你也可以使用的DataContext的设计时的数据，但它必须在文件的开头声明，我不会在这里集中。

，并最终在我的静态类是我在他们这个参数创建我的UC（用户控件）是我的静态类：

public static class NavigationMenuButtonViewModelHelper 
{ 
    public static ObservableCollection<NavigationMenuButtonTemplateViewModel> GetNavMenuButtonInfo() 
    { 
     var data = new ObservableCollection<NavigationMenuButtonTemplateViewModel>(); 
     AddNavMenuButtonItem(data, 
      new NavigationMenuButtonTemplateViewModel(new ButtonInfo 
      { 
       Symbol = @"ms-appx:///Assets/AssetsMainMenuPage/SatSunBonusWhite256x256.png", 
       MenuName = "PRIMAS SABATINAS Y DOMINICALES", 
       BenefitKind = "Subscripción", 
       Status = "Vigente" 
      })); 
     AddNavMenuButtonItem(data, 
      new NavigationMenuButtonTemplateViewModel(new ButtonInfo 
      { 
       Symbol = @"ms-appx:///Assets/AssetsMainMenuPage/OverTimeMoneyWhite256x256.png", 
       MenuName = "JORNADAS EXTRAORDINARIAS", 
       BenefitKind = "Subscripción", 
       Status = "Vigente" 
      })); 
     AddNavMenuButtonItem(data, 
      new NavigationMenuButtonTemplateViewModel(new ButtonInfo 
      { 
       Symbol = @"ms-appx:///Assets/AssetsMainMenuPage/VacationBonusWhite256x256.png", 
       MenuName = "PRIMA VACACIONAL", 
       BenefitKind = "Gratuito", 
       Status = "Vigente" 
      })); 
     AddNavMenuButtonItem(data, 
      new NavigationMenuButtonTemplateViewModel(new ButtonInfo 
      { 
       Symbol = @"ms-appx:///Assets/AssetsMainMenuPage/PecoWhite256x256.png", 
       MenuName = "PERMISOS ECONOMICOS", 
       BenefitKind = "Gratuito", 
       Status = "Vigente" 
      })); 
     AddNavMenuButtonItem(data, 
      new NavigationMenuButtonTemplateViewModel(new ButtonInfo 
      { 
       Symbol = @"ms-appx:///Assets/AssetsMainMenuPage/PunctualityBonusWhite256x256.png", 
       MenuName = "INCENTIVO PUNTUALIDAD Y ASISTENCIA", 
       BenefitKind = "Gratuito", 
       Status = "Vigente" 
      })); 
     AddNavMenuButtonItem(data, 
      new NavigationMenuButtonTemplateViewModel(new ButtonInfo 
      { 
       Symbol = @"ms-appx:///Assets/AssetsMainMenuPage/BonForSeniorityWhite256x256.png", 
       MenuName = "BONO DE ANTIGUEDAD", 
       BenefitKind = "Gratuito", 
       Status = "Vigente" 
      })); 
     AddNavMenuButtonItem(data, 
      new NavigationMenuButtonTemplateViewModel(new ButtonInfo 
      { 
       Symbol = @"ms-appx:///Assets/AssetsMainMenuPage/WageIncreaseWhite256x256.png", 
       MenuName = "RETROACTIVO SUELDO", 
       BenefitKind = "Gratuito", 
       Status = "Vigente" 
      })); 

     return data; 
    } 

    private static void AddNavMenuButtonItem(ObservableCollection<NavigationMenuButtonTemplateViewModel> data, NavigationMenuButtonTemplateViewModel item) 
    { 
     data.Add(item); 
    } 
}

此外，如果你想对样式属性的编程，你应该这样做像xaml.cs例如像这样的：

public sealed partial class NavigationMenuButtonTemplate : UserControl 
{ 
    public NavigationMenuButtonTemplate() 
    { 
     this.InitializeComponent(); 
    } 

    private void NavigationMenuIconImage_PointerEntered(object sender, PointerRoutedEventArgs e) 
    { 
     var image = (Image)sender; 
     var bitmapImage = image.Source as BitmapImage; 
     var uri = bitmapImage?.UriSource; 
     var uriPath = uri?.AbsolutePath; 
     var newUriPath = [email protected]"ms-appx://{uriPath.Replace("White", "Black")}"; 
     image.Source = new BitmapImage(new Uri(newUriPath, UriKind.RelativeOrAbsolute)); 
    } 
}

** SOLUTION 2号：** 另一个解决方案可以是使用具有依赖属性用户控件像这样的：

<toolkitcontrols:Carousel x:Name="NavigationMenuCarouselPanel" 
             HorizontalAlignment="Center" 
             VerticalAlignment="Center" 
             Orientation="Horizontal" 
             ItemSource="{x:Bind ViewModel.MenuList}" 
             ItemMargin="25" 
             ItemDepth="160" 
             ItemRotationX="180" 
             ItemRotationY="25" 
             ItemRotationZ="0" 
             SelectedIndex="0" 
             Grid.Row="1"> 
       <toolkitcontrols:Carousel.EasingFunction> 
        <CubicEase EasingMode="EaseOut"/> 
       </toolkitcontrols:Carousel.EasingFunction>     
       <usercontrolvm:NavigationMenuButtonTemplate ButtonInfo="{x:Bind ViewModel.MenuList[0],Mode=OneWay}"

NavigateToPageCommand =“{x：Bind ViewModel。NavigateToPageCommand}“/>

您必须创建一个NavigationMenuButtonTemplate.xaml.cs与依赖属性像这样的：

public sealed partial class NavigationMenuButtonTemplate : UserControl 
{ 
    public NavigationMenuButtonTemplate() 
    { 
     this.InitializeComponent(); 
    } 

    public DelegateCommand NavigateToPageCommand 
    { 
     get { return (DelegateCommand)GetValue(NavigateToPageCommandProperty); } 
     set { SetValue(NavigateToPageCommandProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for NavigateToPageCommand. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty NavigateToPageCommandProperty = 
     DependencyProperty.Register("NavigateToPageCommand", 
      typeof(DelegateCommand), 
      typeof(NavigationMenuButtonTemplate), 
      new PropertyMetadata(0)); 

    public ButtonInfo ButtonInfo 
    { 
     get { return (ButtonInfo)GetValue(ButtonInfoProperty); } 
     set { SetValue(ButtonInfoProperty, value); } 
    } 

    // Using a DependencyProperty as the backing store for ButtonInfo. This enables animation, styling, binding, etc... 
    public static readonly DependencyProperty ButtonInfoProperty = 
     DependencyProperty.Register("ButtonInfo", 
      typeof(ButtonInfo), 
      typeof(NavigationMenuButtonTemplate), 
      new PropertyMetadata(0));   
}

我不喜欢这个解决办法，因为我不得不重复代码在xaml文件，但它也是一个不错的选择

希望你喜欢我的回答我认为它可以被我们许多人使用，它的适用于许多其他控制与你的无尽的想象力

我只是创建一个用户控件，它包装一个按钮并暴露像符号，ToPageType等依赖属性。 –

我的用户控件包装一个按钮，但它不公开依赖属性。你可以分享一个你的解决方案样本，我会很感激你的想法学习和理解。 grettings哥们！ –

当然，我只是发布了一个答案。 :) –

如何创建可重用的UserControl并为其绑定命令？

相关推荐