UWP 用户控件 + 内容控件答案

【问题标题】：UWP UserControl + ContentControlUWP 用户控件 + 内容控件
【发布时间】：2017-07-07 01:26:15
【问题描述】：

我试图了解内容控件的工作原理以及如何将内容控件放置在我正在构建的用户控件中。据我了解，我的用户控件应该具有对象依赖属性，然后我应该能够将内容控件添加到我的用户控件并将其绑定到依赖属性。

我尝试了用户控件XAML 的变体，包括绕过ScrollViewer 元素并将ContentControl 放置在用户控件XAML 的基本网格内。

如何将此图像放置在此控件中？更广泛地说，我如何将任何 XAML 放在用户控件中？

用户控制 CS

namespace CoreProject.UserControls
{
public sealed partial class ZoomControl : UserControl
{
    public ZoomControl()
    {
        this.InitializeComponent();
    }

    #region Properties
    public static readonly DependencyProperty ZoomContentProperty =
    DependencyProperty.Register("ZoomContent", typeof(object), typeof(ZoomControl), new PropertyMetadata(null));
    public object ZoomContent
    {
        get { return (object)GetValue(ZoomContentProperty); }
        set { SetValue(ZoomContentProperty, value); }
    }
    #endregion

    public void UnZoom()
    {
        // unzoom
        ImageScrollViewer.Visibility = Visibility.Visible;
        var period = TimeSpan.FromMilliseconds(10);
        Windows.System.Threading.ThreadPoolTimer.CreateTimer(async (source) =>
        {
            await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
            {
                ImageScrollViewer.ChangeView(0.0, 0.0, 0.8F, true);
                ImageScrollViewer.Visibility = Visibility.Collapsed;
            });
        }, period);
    }

    public void ZoomToPosition(double zoomOriginX, double zoomOriginY, float zoomFactor, bool disableAnimations)
    {
        ImageScrollViewer.Visibility = Visibility.Visible;
        var period = TimeSpan.FromMilliseconds(10);
        Windows.System.Threading.ThreadPoolTimer.CreateTimer(async (source) =>
        {
            await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
            {
                ImageScrollViewer.ChangeView(zoomOriginX, zoomOriginY, 1.2F, disableAnimations);
            });
        }, period);
    }
}

}

用户控制 Xaml

<Grid>
    <ScrollViewer x:Name="ImageScrollViewer" 
                  ZoomMode="Enabled" 
                  Visibility="Collapsed" 
                  HorizontalContentAlignment="Center" 
                  VerticalContentAlignment="Center" 
                  Background="Transparent" 
                  HorizontalScrollMode="Enabled"
                  VerticalScrollMode="Enabled"
                  HorizontalScrollBarVisibility="Hidden"
                  VerticalScrollBarVisibility="Hidden">
        <Grid>
            <!-- HERE IS WHERE I WANT TO PLACE MY CONTENT -->
            <ContentControl Content="{Binding ZoomContent, ElementName=zoomContent}" />
        </Grid>
    </ScrollViewer>
</Grid>

用户控制使用

<usercontrols:ZoomControl x:Name="ZoomControl">
    <usercontrols:ZoomControl.ZoomContent>
        <!-- THIS IS HOW I WANT TO ADD MY CONTENT, SIMPLY PLACE XAML ELEMENT -->
        <Image Source="/Assets/colocationDataCenterData.jpg" />
    </usercontrols:ZoomControl.ZoomContent>
</usercontrols:ZoomControl>

【问题讨论】：

ElementName=zoomContent -- 您在该范围内没有名为 zoomContent 的元素，因此没有绑定源。尝试将 UserControl 命名为x:Name="userControl" 并绑定到ElementName=userControl。这意味着“在此范围内找到一个名为 userControl 的 XAML 元素，并绑定到该元素的 ZoomComtent 属性”。
所以<usercontrols:ZoomControl x:Name="ZoomControl"> 到<usercontrols:ZoomControl x:Name="userControl"> 是你指的吗？然后更新ElementName 来引用那个？
没有。如果某个父控件将某个特定实例命名为其他名称怎么办？那会破坏控制。如果您在同一个父级中有两个实例怎么办？他们必须有不同的名字，所以只有一个可以工作。无论如何，它也超出了用户控件内 XAML 的范围。
不，UserControl XAML 在MyUserControl.xaml 中有一个根标记UserControl。给那个起名字。在将使用名称的范围内。
给它一个名字并在你的绑定中使用ElementName的名字

标签： c# xaml uwp uwp-xaml

【解决方案1】：

 <Grid>
     <!-- HERE IS WHERE I WANT TO PLACE MY CONTENT -->
     <ContentControl Content="{x:Bind ZoomContent, Mode=OneWay}" />
 </Grid>

您也可以改用 x:Bind - 它将 Binding 上下文作为类本身（您的 UserControl），因此您可以直接绑定。

如果您希望经典绑定起作用，您需要在用户控件本身内命名和 userControl。（顺便说一句，通常您会将其作为模板控件执行，并使用模板绑定）

<UserControl x:Name="zoomContent">
    <Grid>
         <ScrollViewer x:Name="ImageScrollViewer" 
              ZoomMode="Enabled" 
              Visibility="Collapsed" 
              HorizontalContentAlignment="Center" 
              VerticalContentAlignment="Center" 
              Background="Transparent" 
              HorizontalScrollMode="Enabled"
              VerticalScrollMode="Enabled"
              HorizontalScrollBarVisibility="Hidden"
              VerticalScrollBarVisibility="Hidden">
         <Grid>
             <!-- HERE IS WHERE I WANT TO PLACE MY CONTENT -->
             <ContentControl Content="{Binding ZoomContent, ElementName=zoomContent}" />
         </Grid>
     </ScrollViewer>
  </Grid>
</UserControl>

【讨论】：