PopuBox and Background, CornerRadius

[Frillaut]

Hello!
Is it possible to change the Background and CornerRadius properties in the PopuBox?
Something would have come out of it

[nicolaihenriksen]

@Frillaut This is not the default "look" of a PopupBox in MDIX, so could you share some of the XAML you have added to get this appearance? That will make it easier to provide valuable feedback.

[Frillaut]

<md:PopupBox TextBlock.FontSize="14" TextBlock.FontWeight="Medium"
             VerticalAlignment="Center"
             md:RippleAssist.IsCentered="False"
             ClipToBounds="True"
             >
    <md:PopupBox.ToggleContent>
        <md:ColorZone CornerRadius="2" Height="28" Padding="16,0" Mode="PrimaryLight">
            <StackPanel Orientation="Horizontal">
                <md:PackIcon Kind="DockWindow" VerticalAlignment="Center" Foreground="{DynamicResource PrimaryHueDarkBrush}"/>
                <TextBlock Text="PopupBox" Margin="4,0,0,0" VerticalAlignment="Center"/>
            </StackPanel>
        </md:ColorZone>
    </md:PopupBox.ToggleContent>
    <StackPanel Margin="0,-8,0,-8"
                MinWidth="{Binding ActualWidth,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type md:PopupBox}}}"
                >
        <Button Content="item 1" Height="32" VerticalContentAlignment="Center"/>
        <Button Content="item 2" Height="32" VerticalContentAlignment="Center"/>
        <Button Content="item 3" Height="32" VerticalContentAlignment="Center"/>
    </StackPanel>
</md:PopupBox>

But with this layout, I have problems with Ripple. She's under the bottom of the button.

[nicolaihenriksen]

@Frillaut Yeah I can see that causes an issue with the Ripple being below the ColorZone. One way you could "solve" this is by adding your own Ripple to the popupBox.ToggleContent that you add:

<materialDesign:PopupBox TextBlock.FontSize="14" TextBlock.FontWeight="Medium"
             VerticalContentAlignment="Center"
             materialDesign:RippleAssist.IsCentered="False"
             ClipToBounds="True">
  <materialDesign:PopupBox.ToggleContent>
    <materialDesign:ColorZone CornerRadius="8" Height="28" Mode="SecondaryLight">
      <materialDesign:Ripple
        Padding="16,0"
        HorizontalContentAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type materialDesign:PopupBox}}}"
        VerticalContentAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type materialDesign:PopupBox}}}"
        Focusable="False">
        <StackPanel Orientation="Horizontal">
          <materialDesign:PackIcon Kind="DockWindow" VerticalAlignment="Center" Foreground="{DynamicResource PrimaryHueDarkBrush}"/>
          <TextBlock Text="PopupBox" Margin="4,0,0,0" VerticalAlignment="Center"/>
        </StackPanel>
      </materialDesign:Ripple>
    </materialDesign:ColorZone>
  </materialDesign:PopupBox.ToggleContent>
  <StackPanel Margin="0,-8,0,-8"
              MinWidth="{Binding ActualWidth,RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type materialDesign:PopupBox}}}">
    <Button Content="item 1" Height="32" VerticalContentAlignment="Center"/>
    <Button Content="item 2" Height="32" VerticalContentAlignment="Center"/>
    <Button Content="item 3" Height="32" VerticalContentAlignment="Center"/>
  </StackPanel>
</materialDesign:PopupBox>

Note that I have moved the Padding from the ColorZone to the Ripple to ensure the ripple can take up all the space of the color zone.

With regards to CornerRadius. The corner radius in use is simply the one you have applied on the ColorZone. I have changed it to 8 in my sample.
With regards to Background. This is controlled by the Mode of the ColorZone. This ensures that contrast levels etc. are kept at an appropriate level. You could simply use a Border and set the Background explicitly, but then you also need to handle the contrast level stuff yourself. I have changed the ColorZone.Mode to SecondaryLight in my sample.

[nicolaihenriksen]

@Frillaut Actually, a much better option is probably to just use the RippleAssist.RippleOnTop=True on the PopupBox in your original code, that should ensure that your ripple effect becomes visible.

[Frillaut]

When using RippleAssist.RippleOnTop = True, Ripple overlaps all content, including text.
And in both cases, Ripple is out of bounds in the corners. But this is not critical for me, since the radius is small and it will not be noticeable.

In any case, thank you for your advice and for your time!!!