ContentControl中的UserControl具有嵌套的宽度/高度

时间:2013-05-10 09:48:32

标签: c# xaml windows-store-apps

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

在我有ContentControl的其中一个页面中,显示UserControl。在UserControl我有GridView

我的问题是:如何设置UserControl.WidthContentControl.Width相同?
注意:设置UserControl.Width=Auto - 宽度与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"

UserControl无法解决问题。

5 个答案:

答案 0 :(得分:13)

经过大量试验和错误后想出来:

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

关键是使用水平/垂直* 内容 *对齐属性(而不是水平/垂直对齐属性)。

答案 1 :(得分:2)

以下是您出现问题时应该做的事情。

  1. 尝试将ContentControl的{​​{1}}属性设置为令人不安的颜色。例如紫色或粉红色。并在Background上设置Background属性,例如绿色。它可以让您查看UserControl的确切位置以及ContentControl的位置。如果您看不到任何绿色,则可以判断UserControl的内容已被拉伸以填充整个UserControl

  2. 尝试将UserControl的{​​{1}}和UserControl属性设置为VerticalAlignmentFrameworkElement.HorizontalAlignmentVerticalAlignment

      

    注意:为了让这些工作。您无法 UserControl 上明确设置宽度高度

  3. 尝试将HorizontalAlignment的{​​{1}}和Stretch设置为ContentControlControl.HorizontalContentAlignmentVerticalContentAlignment 。这些会拉伸子元素以填充父元素的已分配布局空间。

  4. 如果你仍然看到一些紫色或粉红色再出现问题:)你可以查看VerticalContentAlignment MSDN

  5. 如果仍然搞砸了。然后我不知道我怎么能帮你。最后可能的解决方案是绑定。我不确定它是否有效。

    HorizontalContentAlignment

    我希望有所帮助。我相信你可能真的很烦人。

答案 2 :(得分:2)

特别是对于@AlexeiMalashkevich
我用这样的绑定来解决它:

在根页面中你有:

 <ContentControl x:Name="ActiveItem"/>

然后添加子页面:

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

就是这样。

答案 3 :(得分:1)

您应该能够将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>

希望这有帮助!

答案 4 :(得分:1)

对我而言,这是有效的:

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

...

</UserControl>

您必须确保ContentControl具有所需的尺寸。

例如,我的ContentControl看起来像这样:它总是填满窗口的整个大小。 UserControlContentControl的大小也会发生变化。

<Grid>
    <ContentControl HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" DataContext="{Binding StartViewModel}" Name="ContentArea" />
</Grid>