UWP UserControl + ContentControl

Question

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

我尝试过用户控件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>

Answer 1

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

您也可以使用x:Bind -它将绑定上下文作为类本身( UserControl)，因此可以直接绑定。

如果您想要经典的绑定工作，您需要命名和userControl内部的用户控件本身。(顺便说一句，通常您会将其作为模板化控件来执行，并使用templatebindings)

<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>