How to invoke DialogHost by a button outside of its scope?

Question

I'm using Material Design in my WPF MVVM project. I have the following code:

<materialDesign:DialogHost CloseOnClickAway="True"
                           Grid.RowSpan="2"
                           Identifier="root"
                           Grid.ColumnSpan="3">
    <materialDesign:DialogHost.DialogContent>
        <StackPanel Margin="20">

            <Button Style="{StaticResource MaterialDesignRaisedSecondaryDarkButton}"
                    Width="160"
                    FontFamily="{StaticResource ResourceKey=vazir}"
                    Margin="10,5,5,5"
                    ToolTip="Resource name: MaterialDesignRaisedSecondaryDarkButton"
                    Content="Option 1"
                    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
            <Separator BorderThickness="0.5"
                       Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
            <TextBlock Text="" />
            <Button Style="{StaticResource MaterialDesignRaisedSecondaryDarkButton}"
                    Width="180"
                    Background="Green"
                    FontFamily="{StaticResource ResourceKey=vazir}"
                    Margin="10,5,5,5"
                    ToolTip="Resource name: MaterialDesignRaisedSecondaryDarkButton"
                    Content="Option 2"
                    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
            <Button Style="{StaticResource MaterialDesignRaisedSecondaryDarkButton}"
                    Width="200"
                    Background="Green"
                    FontFamily="{StaticResource ResourceKey=vazir}"
                    Margin="10,5,5,5"
                    ToolTip="Resource name: MaterialDesignRaisedSecondaryDarkButton"
                    Content="Option 3"
                    IsEnabled="{Binding DataContext.ControlsEnabled, RelativeSource={RelativeSource FindAncestor, AncestorType=Window}}" />
        </StackPanel>
    </materialDesign:DialogHost.DialogContent>

    <Button x:Name="fileDialogBtn"
            Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}"
            Content="Show Dialog"
            Visibility="Collapsed"
            HorizontalAlignment="Center"
            VerticalAlignment="Center"
            Margin="50,0,0,0" />
</materialDesign:DialogHost>

I want to invoke this DialogHost by another Button that exists outside its scope. Using a Button that exists inside the scope, the DialogHost is invoked and shown easily, but I want to invoke it from the outside. Is it possible?

Answer 1

You need to declare a boolean property in your ViewModel example :IsDialogOpen and bind to the DialogHost's IsOpen property, then make your button set this property to true using a command.