c# - UWP 用户控件 + 内容控件

Question

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

我尝试了用户控件 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 来代替 - 它将 Binding 上下文作为类本身(您的 UserControl)，因此您可以直接绑定(bind)。

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

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