PopupBox Implementation

[Tenjim]

Hi guys,

Just a question, do you have any implementations of PopupBox from Material Design ?
I'm using it and I wanna to know if there is any implementations ingoing for material.avalonia ?

Thanks in advance.

[SKProCH]

Hello, @Tenjim

If I understand you correctly, then what you want is implemented in DialogHost.Avalonia:

Soon I think I'll be integrating this package into Material.Design, but for now it can be delivered and used separately.

Does this solve your problem?

[Tenjim]

Hi @SKProCH,

It's a button that open a content with others controls in it.
It's not a other window poping like DialogHost.

[SKProCH]

@Tenjim, you can use, for example, ToggleButton and Popup controls like this:

<ToggleButton Name="MyToggleButton" HorizontalAlignment="Center">Toggle me</ToggleButton>
<Popup IsOpen="{Binding #MyToggleButton.IsChecked}"
       PlacementTarget="MyToggleButton"
       PlacementMode="Bottom">
  <styles:Card>
    <TextBlock>Your popup content here</TextBlock>
  </styles:Card>
</Popup>

[Tenjim]

@SKProCH , Thank ! I'll try it to check if it complete my need :)

[Tenjim]

Hi @SKProCH,

Just to clarify what we need. It's a control from MaterialDesignInXamlToolkit. https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit/wiki/PopupBox

[SKProCH]

@Tenjim, We don't have one out of the box at the moment.

We will try to implement this control as early as possible, but I do not know when it will be, because the main team of contributors is currently busy at work.
If you want, then you can implement this (or something else) by yourself and create a PR. They are warmly welcomed.

[SKProCH]

@Tenjim, seems like this is already implemented via Menu control:

Is this what you were looking for?

[Tenjim]

@SKProCH, not really because I want to put an usercontrol on the popup content like your first example.

I want to put a usercontrol which have many Buttons/ ComboBox/ CheckBox/... like into the Card

example :

<PopupBox  IsEnabled="True">
       <control: CustomUserControl>
</PopupBox>

CustomUserControl.axaml:

<StackPanel>
            <TextBlock x:Name="Label"
                       VerticalAlignment="Center"
                       Text="{Binding Label}">
            </TextBlock>
            <CheckBox 
                  IsChecked="{Binding IsCheck}"
                  Name="CheckBoxTest1"/>
</StackPanel>

It's what I want to do with PopupBox.

[Tenjim]

Hi @SKProCH,

Finally, I have done a workaround with your advice (Togglebutton with popup) :

<Style Selector="buttons|PopupBox">
      <Setter Property="Template">
        <ControlTemplate>
            <Grid>
                <ToggleButton Name="toggle" IsEnabled="True" HorizontalAlignment="Center" IsChecked="{Binding #StandardPop.IsOpen}">Click me</ToggleButton>
                <Popup x:Name="StandardPop" IsLightDismissEnabled="True"
                       HorizontalOffset="0"
                       VerticalOffset="10"
                       PlacementTarget="toggle"
                       IsOpen="{Binding #toggle.IsChecked}">
                    <styles:Card
                        Name="CardPopup"
                        FontSize="15"
                        FontWeight="Regular"
                        Padding="10"
                        Margin="5">
                        <ContentPresenter Content="{TemplateBinding Content}" />
                    </styles:Card>

                </Popup>
            </Grid>
        </ControlTemplate>
      </Setter>
  </Style>

Tenjim