Change UserControl content in WPF

Question

I have following UserControl defined in wpf:

<UserControl x:Class="Views.HideShowDetailsView"
         xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
         xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
         xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
         xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
         mc:Ignorable="d">
<DockPanel Background="#FFFFF2CC" Name="HideShowDetailsPanel">
    <Button Name="hidePatientDetails" 
            Background="Transparent" 
            Margin="10,10"
            Width="40"
            BorderBrush="Transparent"
            BorderThickness="0"
            DockPanel.Dock="Right"
            Command="{Binding Path=HideDetailsCommand}" >
        <Button.Template>
            <ControlTemplate TargetType="Button">
                <Image Source="../Resources/ArrowRight.png" />
            </ControlTemplate>
        </Button.Template>
    </Button>
</DockPanel>
</UserControl>

And I need to change it's content by adding image canvas and another button when Command is activated. How this can be achieved in wpf?

Answer 1

You can do it by adding the two new controls to a container, say, StackPanel somewhere inside your UC. Then assign the following style to the StackPanel :

<Style x:Key="stackStyle" TargetType="StackPanel">
    <Setter Property="Visibility" Value="Visible" />
    <Style.Triggers>
        <DataTrigger Binding="{Binding IsEnabled, ElementName=hidePatientDetails}" Value="False">
            <Setter Property="Visibility" Value="Collapsed" />
        </DataTrigger>
    </Style.Triggers>
</Style>