如何根據用戶控件上的屬性設置來設置用戶控件中元素的大小？

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

我知道這似乎已經回答了，但是這與我去年創建簡單條形圖時所做的類似。 只需將百分比綁定到“ Content”屬性，您將獲得一個自動調整大小的欄，而無需所有額外的代碼...

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

Answer 3

ActualWidth僅在進行度量傳遞之后才有意義。 您正在嘗試在C-tor中執行此操作，這可能是在實施該措施之前。

嘗試使用事件LayoutUpdated，它肯定會在布局過程完成之后發生。

Answer 4

處理（用戶控件）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;
    }