2011-03-31 66 views
1

爲了簡單起見:我有一個由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> 

回答

1

你爲什麼不拿到網格做這一切爲你那就是它擅長的: -

<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 

注意它的最後兩行,其中魔術發生。

0

ActualWidth的只會是相關的測量通有後發生在。你正試圖在C-tor中做到這一點,在度量發生之前這將是WAY。

嘗試並使用佈局過程完成後發生的Event LayoutUpdated。

+1

好吧,這工作,但我只需要它來運行一次,在啓動時,而不是每次瀏覽器調整大小或(無論其他)我是否在處理程序本身中分離處理程序。這是好的做法嗎?有什麼影響嗎? – descf 2011-03-31 19:07:54

+0

這很合理,並且沒有任何影響。只需刪除處理程序。 – 2011-03-31 19:09:20

0

處理(用戶控件的)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

+0

OuterRectangle.ActualWidth仍然在零 – descf 2011-03-31 18:56:19

+0

不,它不..看到上面的圖片..你確定你正確地處理事件,並有該事件內的代碼? – 2011-03-31 19:06:54

+0

我仔細檢查了我的代碼,以確保它與您的代碼相同,而且我仍然收到零。 – descf 2011-03-31 19:10:01

0

我知道這似乎已經回答了,但這裏的東西類似於去年創建簡單的條形圖。只要您的百分比綁定到「內容」屬性,你會得到一個自動調整大小酒吧都沒有額外的代碼...

<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> 
相關問題