使用嵌套的宽度/高度在ContentControl中的UserControl

本文关键字：高度 ContentControl 中的 UserControl 嵌套 | 更新日期: 2023-09-27 18:13:11

我正在使用Caliburn Micro开发Windows Store应用程序。

在其中一个页面中，我有ContentControl，它显示UserControl。在UserControl我有GridView .

我的问题是:如何设置UserControl.Width与ContentControl.Width相同?
注意:UserControl.Width=Auto - width是否与GridView.Width相同

在page.xaml 

<ContentControl x:Name="ActiveItem" />
在usercontrol.xaml 

<UserControl
x:Class="Test.Views.GroupView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="Auto" Height="Auto">
    <Grid Margin="0,20">
        <GridView x:Name="Groups" Margin="0" />
    </Grid>
</UserControl>


添加

  VerticalAlignment="Stretch"
  HorizontalAlignment="Stretch"

To UserControl并不能解决问题

使用嵌套的宽度/高度在ContentControl中的UserControl

经过反复试验后得出了这个结论:

<ContentControl Name="MyContent" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">

关键是使用Horizontal/Vertical*Content*Alignment属性(而不是Horizontal/VerticalAlignment属性)

当你遇到类似的问题时，你应该这样做。

  1. 尝试将ContentControl的Background属性设置为一些令人不安的颜色。例如紫色或粉红色。并且在UserControl上设置Background属性，例如绿色。它将允许您看到ContentControl和UserControl的确切位置。如果你看不到任何绿色，你可以告诉UserControl的内容被拉伸到填充整个UserControl。

  2. 尝试将UserControl的VerticalAlignment和HorizontalAlignment属性设置为Stretch。FrameworkElement。HorizontalAlignment, VerticalAlignment

    注意:为了让这些工作。不能在UserControl上显式地设置Width和Height。

  3. 尝试将ContentControl的VerticalContentAlignment和HorizontalContentAlignment设置为Stretch。控制。横向内容对齐，纵向内容对齐。这些扩展子元素以填充父元素分配的布局空间。

  4. 如果你仍然看到一些紫色或粉红色，那么事情又错了:)你可以检查Margin/Padding MSDN

如果还是乱糟糟的。那我不知道我还能怎么帮你。最后一种可能的解决方案是有约束力的。我不确定它是否有效。

<UserControl
Width="{Binding RelativeSource=
        {RelativeSource FindAncestor,
        AncestorType={x:Type ContentControl}},
        Path=ActualWidth}"
Height="{Binding RelativeSource=
        {RelativeSource FindAncestor,
          AncestorType={x:Type ContentControl}},
          Path=ActualHeight}">
...
</UserControl>

我希望有什么能帮到你。我相信这是一个非常恼人的问题。

尤其对于@AlexeiMalashkevich
我使用这样的绑定来解决这个问题:

在根页你有:

 <ContentControl x:Name="ActiveItem"/>

然后添加子页面:

<Page
    Height="{Binding ActualHeight, ElementName=ActiveItem}"
    Width="{Binding ActualWidth, ElementName=ActiveItem}"
    ......
/>

你应该能够将UserControl的宽度绑定到ContentControl的ActualWidth。

<local:MyUserControl1 Height="50" Width="{Binding ElementName=contentControl, Path=ActualWidth}"/>
下面是一些示例代码: 
<Page
    x:Class="stofUserControlWidth.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:stofUserControlWidth"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="2*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Border Background="Cyan"/>
        <ContentControl Grid.Column="1" x:Name="contentControl">
            <local:MyUserControl1 Height="50" Width="{Binding ElementName=contentControl, Path=ActualWidth}"/>
        </ContentControl>
    </Grid>
</Page>
这里是MyUserControl1。xaml代码:
<UserControl
    x:Class="stofUserControlWidth.MyUserControl1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:stofUserControlWidth"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300"
    d:DesignWidth="400">
    <Grid Background="Magenta">        
    </Grid>
</UserControl>

希望这对你有帮助!

对我来说这是有效的:

<UserControl
                 ...
                    Height="{Binding ActualHeight,
                    RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ContentControl}}}">
...
</UserControl>

您必须确保您的ContentControl具有所需的大小。

例如，我的ContentControl看起来像这样:它总是填充整个窗口的大小。ContentControl中UserControl的大小也会发生动态变化。 
<Grid>
    <ContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding StartViewModel}" Name="ContentArea" />
</Grid>
相关文章：