Question

为了简单起见：我有一个由2个矩形组成的用户控件。在设计时，控件的用户设置用户控件的宽度和一个矩形的默认值，这是用户控件的属性。我想将默认值视为百分比，并将其中一个矩形的宽度设置为其他矩形宽度的百分比。我遇到的那种困难是我无法获得外部矩形的宽度来将其他矩形宽度设置为百分比（因为一切似乎都是0或NaN）。这是一些代码：

用户控制：

<Grid x:Name="LayoutRoot" Background="White">

    <Rectangle x:Name="OuterRectangle" Fill="Red"/>
    <Rectangle x:Name="InnerRectangle" Fill="Blue"/>

</Grid>

后面的用户控制代码：

public partial class ucRectangles : UserControl
{
    public Double Percent { get; set; }

    public ucRectangles()
    {
        InitializeComponent();

        InnerRectangle.Width = Percent / 100 * OuterRectangle.ActualWidth;
    }
}

主页：

<Grid x:Name="LayoutRoot" VerticalAlignment="Center">

    <local:ucRectangles Width="400" Height="40" Percent="50"/>

</Grid>

Answer 1

为什么不让Grid为你做这一切的擅长： -

<Grid x:Name="LayoutRoot" Background="White">
     <Grid.ColumnDefinitions>
         <ColumnDefinition Width="50*" />
         <ColumnDefinition Width="50*" />
     </Grid.ColumnDefinitions>
     <Rectangle x:Name="OuterRectangle" Fill="Red" Grid.ColumnSpan="2"/>
     <Rectangle x:Name="InnerRectangle" Fill="Blue" />
</Grid>

现在只是摆弄列定义的星值，这是我对Percent依赖属性的实现： -

    #region public double Percent
    public double Percent
    {
        get { return (double)GetValue(PercentProperty); }
        set { SetValue(PercentProperty, value); }
    }

    public static readonly DependencyProperty PercentProperty =
        DependencyProperty.Register(
            "Percent",
            typeof(double),
            typeof(ShowCase1),
            new PropertyMetadata(50.0, OnPercentPropertyChanged));

    private static void OnPercentPropertyChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
    {
        ShowCase1 source = d as ShowCase1;
        double percent = (double)e.NewValue;

        source.LayoutRoot.ColumnDefinitions[0].Width = new GridLength(percent, GridUnitType.Star);
        source.LayoutRoot.ColumnDefinitions[1].Width = new GridLength(100 - percent, GridUnitType.Star);            
    }
   #endregion public double Percent

请注意魔法发生的最后两行。

Answer 2

ActualWidth仅在测量传递发生后才有意义。你试图在C-tor中进行，在测量发生之前就是这样。

尝试并使用Event LayoutUpdated，它必须在布局过程完成后发生。

Answer 3

处理（用户控件）LayoutRoot加载事件并在其中移动代码。

用户控制XAML

   <Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">

用户控制代码背后

 private void LayoutRoot_Loaded(object sender, RoutedEventArgs e)
    {
        InnerRectangle.Width = Percent / 100 * OuterRectangle.ActualWidth;
    }

enter image description here

Answer 4

我知道这似乎已经回答了，但这里有类似我去年做的简单条形图。只需将您的百分比绑定到＆＃34;内容＆＃34;属性，你将获得一个自动调整大小的栏，没有所有额外的代码...

<ContentPresenter Content="0.3" Height="30">   <!-- Bind the "Content" to your percentage -->
        <ContentPresenter.ContentTemplate>
            <DataTemplate>
                <Grid Background="YellowGreen">
                    <Rectangle Fill="Purple" Margin="0,5,0,5" HorizontalAlignment="Stretch" RenderTransformOrigin="0.5,0.5">
                        <Rectangle.OpacityMask>
                            <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                                <GradientStop Color="#FFFFFFFF" Offset="0"/>
                                <GradientStop Color="#FFFFFFFF" Offset="{Binding}"/>
                                <GradientStop Color="#00000000" Offset="{Binding}"/>
                                <GradientStop Color="#00000000" Offset="1"/>
                            </LinearGradientBrush>
                        </Rectangle.OpacityMask>
                    </Rectangle>
                </Grid>
            </DataTemplate>
        </ContentPresenter.ContentTemplate>
    </ContentPresenter>

如何根据用户控件上的属性设置设置用户控件中元素的大小？

4 个答案: