WPF template binding for a width of element based on presence of content in another element

Question

I have custom control (not user control) which inherits from ContentControl. Its default style:

    <Style TargetType="{x:Type views:DialogCustomControl}">
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="{x:Type views:DialogCustomControl}">
                    <Grid>
                        <Border Width="40">
                            <ContentPresenter Content="{TemplateBinding IconContent}" />
                        </Border>

I need it to be 40 if IconContent is not null and 0 otherwise.

I know how to make it work in code with dep prop. But I am pretty sure it is also possible declaratively.

Answer 1

You can add a DataTrigger to your Border's Style and use x:Null as its Value:

<Border>
    <Border.Style>
        <Style TargetType="Border">
            <Setter Property="Width"
                    Value="40" />
            <Style.Triggers>
                <DataTrigger Binding="{TemplateBinding IconContent}"
                                Value="{x:Null}">
                    <Setter Property="Width"
                            Value="0" />
                </DataTrigger>
            </Style.Triggers>
        </Style>
    </Border.Style>
    <ContentPresenter Content="{TemplateBinding IconContent}" />
</Border>

Answer 2

You could use a Style for the Border with a DataTrigger that binds to the parent DialogCustomControl using the RelativeSource property:

<Style TargetType="{x:Type views:DialogCustomControl}">
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type views:DialogCustomControl}">
                <Grid>
                    <Border>
                        <Border.Style>
                            <Style TargetType="Border">
                                <Setter Property="Width" Value="40" />
                                <Style.Triggers>
                                    <DataTrigger Binding="{Binding IconContent, 
                                        RelativeSource={RelativeSource AncestorType=views:DialogCustomControl}}"
                                                 Value="{x:Null}">
                                        <Setter Property="Width" Value="0" />
                                    </DataTrigger>
                                </Style.Triggers>
                            </Style>
                        </Border.Style>
                        <ContentPresenter Content="{TemplateBinding IconContent}" />
                    </Border>
                </Grid>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
</Style>