CODEWITHSUNDEEP
wpflayout
Kildareflare
Kildareflare

Reputation: 4768

Overlay 2 controls and toggle which one is visible using WPF

This is a general question which will apply to any WPF control.

What I am trying to do is place two controls on top of each other and toggle which is visible.

I.e I want to control the visbility of them such that only one control is visible at one time. One control will normally be hidden but upon some event will be displayed on top of the other control.

I have tried changing the z order and tried using the visibility property, but while I can make the normally hidden control appear, the normally displayed control is also visible.

E.g. the button below is normally hidden, but upon an a menu item click, for example, the ShowAboutBox property in a viewmodel will be set, changing the visibility property. At which point the button should be visible and not the dockpanel.

<Grid>
    <Button Visibility="{Binding ShowAboutBox, Converter={StaticResource BoolToVisConverter}}">
        <Button.Content>About My App</Button.Content></Button>
    <DockPanel Canvas.ZIndex="0"  LastChildFill="True"></DockPanel>
</Grid>

I'm not that experienced in WPF but assuming that this should be quite easy - any suggestions?

EDIT:

The code above shows a mix of techniques I tried. And probably confuses the issue. Most recently I have tried the following to no avail either.

<Grid>
    <Button Visibility="{Binding ShowAboutBox, Converter={StaticResource BoolToVisConverter}}">
        <Button.Content>About My App</Button.Content></Button>
    <DockPanel></DockPanel>
</Grid>

Changing the visibility of the button causes it to display, but the dock panel and its contents are still visbile on top of the button. (the button is shown behind the dockpanel due to the z order).

I guess I could toggle the visibility of the dock panel at the same time (to be the reverse of the button) but I was hoping to avoid that.

Upvotes: 2

Views: 7259

Answers (3)

anivas
anivas

Reputation: 6547

You can use the generic BooleanConverter here and declare True and False value accordingly.

Upvotes: 0

Ross
Ross

Reputation: 4568

I would bind the DockPanel's Visibility to ShowAboutBox as well, but using an inverse converter. I have a bunch of handy little converters like this created for just this type of scenario:

<Grid>
    <Button Visibility="{Binding ShowAboutBox, Converter={StaticResource BoolToVisConverter}}">About My App</Button>
    <DockPanel Visibility="{Binding ShowAboutBox, Converter={StaticResource BoolToInverseVisConverter}}"></DockPanel>
</Grid>

And the basic converter (could be expanded to support nullables, etc):

public class BooleanToInverseVisibilityConverter : IValueConverter {

    public object Convert(object value, Type targetType, object parameter, CultureInfo culture) {
        return (bool) value ? Visibility.Collapsed : Visibility.Visible;
    }

    public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) {
        return null;
    }

}

Upvotes: 3

Robert Levy
Robert Levy

Reputation: 29073

Your ZIndex trick isn't working because the button also has a zindex of 0 (since it is first in the collection). You would need to explicitly change the button's ZIndex to somehting higher than 0 for the DockPanel to appear on top of it.

That said, the correct solution here is to just toggle the button's Visibility property between Hidden & Visible, not changing ZIndex at all.

Upvotes: 0

Related Questions