prosource

WPF - 사용자 컨트롤 내에서 내용 호스팅

probook 2023. 6. 2. 20:38
반응형

WPF - 사용자 컨트롤 내에서 내용 호스팅

다음을 포함하는 사용자 컨트롤을 만들려고 합니다.Grid두 줄로제목에 대한 첫 번째 행과 사용자 제어 외부에서 정의될 내용에 대한 두 번째 행(예:Button우리의 예에서

어쩐지 작동이 안 됐어요.

사용자 컨트롤1 xaml:

  <Grid Background="LightBlue">
    <Grid.RowDefinitions>
        <RowDefinition Height="50" />
        <RowDefinition Height="*" />
    </Grid.RowDefinitions>
    <TextBlock Text="Title" FontSize="30" Margin="10,0,0,0"/>
</Grid>

주 창 xaml:

 <Grid>
    <local:UserControl1>
        <Button>Click me</Button>
    </local:UserControl1>
</Grid>

아래 그림은 제 문제를 설명해 줄 것입니다.여기에 이미지 설명 입력

다음 코드

<local:UserControl1>
    <Button>Click me</Button>
</local:UserControl1>

사용자가 설정하는 의미UserControl1의 콘텐츠 속성이 해당 단추가 됩니다.이 버튼은 단순히 그것을 대체합니다.UserControls1의 마크업.따라서 UserControl1.xaml에 있는 모든 것은 더 이상 존재하지 않습니다.

편집

사용자 컨트롤에서 외부에서 설정할 마크업을 호스트하도록 하려면 다음을 추가할 수 있습니다.DependencyProperty예를 들어 다음과 같습니다.

    /// <summary>
    /// Gets or sets additional content for the UserControl
    /// </summary>
    public object AdditionalContent
    {
        get { return (object)GetValue(AdditionalContentProperty); }
        set { SetValue(AdditionalContentProperty, value); }
    }
    public static readonly DependencyProperty AdditionalContentProperty =
        DependencyProperty.Register("AdditionalContent", typeof(object), typeof(UserControl1),
          new PropertyMetadata(null));

그리고 마크업에 몇 가지 요소를 추가하여 추가 콘텐츠를 호스팅합니다.다음은 제공한 마크업 확장 예제입니다.

<UserControl ... Name="userControl">
    <Grid Background="LightBlue">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <TextBlock Text="Title" FontSize="30" Margin="10,0,0,0"/>
        <ContentPresenter Content="{Binding AdditionalContent, ElementName=userControl}" />
    </Grid>
</UserControl>

이제 다음과 같이 사용할 수 있습니다.

<local:UserControl1>
    <local:UserControl1.AdditionalContent>
        <Button>Click me</Button>
    </local:UserControl1.AdditionalContent>
</local:UserControl1>

설정해야 합니다.ControlTemplate:

<UserControl>
<UserControl.Resources>
    <Style TargetType="{x:Type local:UserControl1}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type local:UserControl1}">
                    <Grid Background="LightBlue">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="50" />
                            <RowDefinition Height="*" />
                        </Grid.RowDefinitions>
                        <TextBlock Grid.Row="0" Text="Title" FontSize="30" Margin="10,0,0,0"/>
                        <ContentPresenter Grid.Row="1" />
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
</UserControl>

사용자 컨트롤을 템플릿으로 만들어 다음과 같은 추가 시각 자료를 추가할 수 있습니다.TextBlock.

<UserControl>
<UserControl.Style>
  <Style TargetType="{x:Type UserControl}">
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate>              
          <Grid Background="LightBlue"> 
          <Grid.RowDefinitions> 
            <RowDefinition Height="50" /> 
            <RowDefinition Height="*" /> 
          </Grid.RowDefinitions> 
          <TextBlock Text="Title" FontSize="30" Margin="10,0,0,0"/> 
          <ContentPresenter Grid.Row="1" Content="{TemplateBinding Content}"  />
          </Grid> 
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>
</UserControl.Style>
<Button>
  Click me!
</Button>
</UserControl>

템플릿 사용

< 컨텐츠 컨트롤 />

내용 발표자를 사용하는 대신

다음과 같이 배치합니다.

<UserControl.Style>
        <Style TargetType="{x:Type UserControl}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type UserControl}" >
                          <Grid Background="LightBlue"> 
                           <Grid.RowDefinitions> 
                            <RowDefinition Height="50" /> 
                            <RowDefinition Height="*" /> 
                          </Grid.RowDefinitions> 
                           <TextBlock Text="Title" FontSize="30" Margin="10,0,0,0"/> 

                        <ContentControl  Grid.Row="1" Content="{TemplateBinding Content}"  />

                        </Grid> 
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </UserControl.Style>

사용자 컨트롤에

다음은 사용자 컨트롤에 대한 간단한 일반 템플릿입니다(내용을 설정할 때 스타일이나 속성을 사용하지 않음).

<UserControl ...>
   <UserControl.Template>
       <ControlTemplate TargetType="{x:Type UserControl}">
           <!-- control contents here -->
           <ContentPresenter/><!-- outside contents go here -->
           <!-- control contents here -->
       </ControlTemplate>
   </UserControl.Template>
</UserControl>

<ControlTemplate>각 컨트롤에 대해 복제된 사용자 컨트롤의 XAML을 나타냅니다.

<ContentPresenter>이 곳에서Content컨트롤을 사용할 때 놓입니다.

언급URL : https://stackoverflow.com/questions/10427133/wpf-hosting-content-inside-a-usercontrol

반응형