[WPF] 두 개의 ContentPresenter, 하나의 Content

언젠가 어떤 컨트롤을 만드는데 하나의 Content를 두 개의 ContentPresenter를 통해 두 번 표현하려는 아이디어가 있었습니다. 왕년에 애플이 유행시킨 바닥에 반사된 느낌을 만들어 낼 때에도 이런 아이디어가 쓰임직합니다.

문제를 단순화하기 위해 아래와 같은 XAML 코드가 작성되었다고 가정하겠습니다.

<ControlTemplate>
    <Grid>
        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Left"/>
        <ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Right"/>
    </Grid>
</ControlTemplate>

두 개의 Content가 좌우로 나와야 할 것 같은데, 오른쪽 것만 나오는 것이었습니다. "뭐지? 왜?"하며 수많은 실험을 했지만, 두 개의 Content를 동시에 렌더링할 수 없었습니다. 세 개, 네 개를 넣어봐도 항상 XAML에서 마지막으로 위치한 ContentPrensenter만이 Content를 성공적으로 표시합니다.

그렇다고 포기할 수는 없지요.
VisualBrush를 활용하여 다음과 같이 하면 Content를 두 번 표시할 수 있습니다.

<ControlTemplate>
    <Grid>
        <Grid HorizontalAlignment="Left">
            <Grid.Background>
                <VisualBrush Visual="{Binding ElementName=contentPresenter}" /> 
            </Grid.Background>
        </Grid>
        <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" HorizontalAlignment="Right"/>
    </Grid>
</ControlTemplate>

그런데 여기에도 문제가 있습니다. 아래와 같이 contentPresenter의 Opacity 값이라도 변경하면, VisualBrush에도 그대로 반영되서 싫습니다. ```xml ```
그럴 때 추가적인 팁이 있습니다. ContentPresenter는 그대로 두고 그것을 Grid 등으로 감싸서 그 Grid의 속성을 변경하여 사용하면 됩니다.

<ControlTemplate>
    <Grid>
        <Grid HorizontalAlignment="Left">
            <Grid.Background>
                <VisualBrush Visual="{Binding ElementName=contentPresenter}" /> 
            </Grid.Background>
        </Grid>
        <Grid HorizontalAlignment="Right" Opacity="0.5">
            <ContentPresenter x:Name="contentPresenter" Content="{TemplateBinding Content}" />
        </Grid>
    </Grid>
</ControlTemplate>

별것 아니지만, 이 사실을 미리 인지하고 있으면 삽질하는 시간을 많이 절약할 수 있습니다. 이것은 ContentControl에 대해서도 마찬가지이니 참고 바랍니다.