사용자 정의 컨트롤의 속성 설정에 따라 사용자 정의 컨트롤의 요소 크기를 어떻게 설정합니까?

Question

이 작업을 간단하게하려면 다음과 같이하십시오. 두 개의 사각형으로 구성된 사용자 정의 컨트롤이 있습니다. 디자인 타임에 컨트롤의 사용자는 사용자 정의 컨트롤의 너비와 사용자 정의 컨트롤의 속성 인 사각형 중 하나의 기본값을 설정합니다. 나는 기본 값을 백분율로 취급하고 사각형 중 하나의 너비를 다른 사각형의 해당 너비로 설정하려고합니다. 내가 가지고있는 어려움의 종류는 다른 모든 사각형을 너비의 백분율로 설정하는 바깥 쪽 사각형의 너비를 얻을 수 없다는 것입니다 (모든 것이 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

가 왜 당신을 위해 모든 것을 할 수있는 그리드를하지 않는 뒤에

사용자 제어 XAML

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

사용자 제어 코드가 무엇인지 그것의 좋은에서 -

<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- 토르 (C-tor)에서 그것을하려고하고 있습니다. 그것은 법안이 일어나기 전에있을 것입니다.

레이아웃 프로세스가 완료된 후에 발생할 수있는 이벤트 레이아웃 업데이트를 사용해보십시오.

Answer 3

핸들 (사용자 정의 컨트롤) LayoutRoot가로드 한 이벤트와 그 안에 코드를 이동하십시오.

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

Answer 4

나는 이것이 이미 대답 된 것 같지만, 여기에 간단한 바 차트를 만들기 위해 작년에했던 비슷한 점이있다. "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>