search

unoplatform / uno.toolkit.ui

A set of custom controls for the WinUI and the Uno Platform not offered out of the box by WinUI, such as Card, TabBar, NavigationBar, etc.
https://platform.uno/
MIT License
82 stars 27 forks source link

[All] Drawer Flyout Presenter Opaque Background #281

Closed Soap-141 closed 11 months ago

Soap-141 commented 2 years ago

Current behavior

There is no option to make the drawer flyout background transparent or it should be by default.

Capture_92

Expected behavior

The drawer flyout background should be transparent by default or have an option to make it transparent.

How to reproduce it (as minimally and precisely as possible)

  1. Download DrawerFlyoutPresenterSample - Copy.zip
  2. Start Solution with VS 2022 Preview 6
  3. Start Project
  4. Click on Test button
  5. Notice drawer flyout is opaque when it should be transparent or have to option to be

Environment

Nuget Package:

Package Version(s):

Affected platform(s):

Visual Studio:

Relevant plugins:

Anything else we need to know?

I used this documentation.

@Xiaoy312 Made a workaround for me (Custom style).

Xiaoy312 commented 2 years ago 
      xmlns:utu="using:Uno.Toolkit.UI.Controls"
      xmlns:win="using:Uno.Toolkit.UI.Controls"
      xmlns:not_win="http://uno.ui/not_win"
      mc:Ignorable="d not_win"

        <Style x:Key="RoundedDrawerFlyoutPresenterStyle" TargetType="utu:DrawerFlyoutPresenter">
            <Setter Property="LightDismissOverlayBackground" Value="#80808080" />

            <Setter Property="HorizontalAlignment" Value="Stretch" />
            <Setter Property="VerticalAlignment" Value="Stretch" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Stretch" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="utu:DrawerFlyoutPresenter">
                        <Grid x:Name="RootPanel">

                            <Border x:Name="LightDismissOverlay"
                                    Background="{TemplateBinding LightDismissOverlayBackground}" />
                            <ContentPresenter x:Name="DrawerContentPresenter"
                                              CornerRadius="{TemplateBinding CornerRadius}"
                                              Content="{TemplateBinding Content}"
                                              ContentTemplate="{TemplateBinding ContentTemplate}"
                                              ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                                              BorderBrush="{TemplateBinding BorderBrush}"
                                              BorderThickness="{TemplateBinding BorderThickness}"
                                              Background="{TemplateBinding Background}"
                                              Padding="{TemplateBinding Padding}" />

                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        <Style x:Key="BaseRoundedDrawerFlyoutPresenterStyle"
               TargetType="FlyoutPresenter"
               BasedOn="{StaticResource DrawerFlyoutPresenterStyle}">

            <Setter Property="BorderBrush" Value="Red" />
            <Setter Property="Background" Value="Pink" />
            <Setter Property="BorderThickness" Value="5" />
            <Setter Property="CornerRadius" Value="50,50,0,0" />
            <Setter Property="Padding" Value="25" />

            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="FlyoutPresenter">
                        <utu:DrawerFlyoutPresenter Content="{TemplateBinding Content}"
                                                   ContentTemplate="{TemplateBinding ContentTemplate}"
                                                   BorderBrush="{TemplateBinding BorderBrush}"
                                                   BorderThickness="{TemplateBinding BorderThickness}"
                                                   CornerRadius="{TemplateBinding CornerRadius}"
                                                   Background="{TemplateBinding Background}"
                                                   Padding="{TemplateBinding Padding}"
                                                   HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                                   HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                   VerticalAlignment="{TemplateBinding VerticalAlignment}"
                                                   VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
                                                   win:OpenDirection="{TemplateBinding utu:DrawerFlyoutPresenter.OpenDirection}"
                                                   not_win:OpenDirection="{Binding Path=(utu:DrawerFlyoutPresenter.OpenDirection), RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                   win:LightDismissOverlayBackground="{TemplateBinding utu:DrawerFlyoutPresenter.LightDismissOverlayBackground}"
                                                   not_win:LightDismissOverlayBackground="{Binding Path=(utu:DrawerFlyoutPresenter.LightDismissOverlayBackground), RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                   win:IsGestureEnabled="{TemplateBinding utu:DrawerFlyoutPresenter.IsGestureEnabled}"
                                                   not_win:IsGestureEnabled="{Binding Path=(utu:DrawerFlyoutPresenter.IsGestureEnabled), RelativeSource={RelativeSource Mode=TemplatedParent}}"
                                                   Style="{StaticResource RoundedDrawerFlyoutPresenterStyle}"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

        <Style x:Key="LeftRoundedDrawerFlyoutPresenterStyle"
               TargetType="FlyoutPresenter"
               BasedOn="{StaticResource BaseRoundedDrawerFlyoutPresenterStyle}">
            <Setter Property="utu:DrawerFlyoutPresenter.OpenDirection" Value="Right" />
        </Style>
        <Style x:Key="TopRoundedDrawerFlyoutPresenterStyle"
               TargetType="FlyoutPresenter"
               BasedOn="{StaticResource BaseRoundedDrawerFlyoutPresenterStyle}">
            <Setter Property="utu:DrawerFlyoutPresenter.OpenDirection" Value="Down" />
        </Style>
        <Style x:Key="RightRoundedDrawerFlyoutPresenterStyle"
               TargetType="FlyoutPresenter"
               BasedOn="{StaticResource BaseRoundedDrawerFlyoutPresenterStyle}">
            <Setter Property="utu:DrawerFlyoutPresenter.OpenDirection" Value="Left" />
        </Style>
        <Style x:Key="BottomRoundedDrawerFlyoutPresenterStyle"
               TargetType="FlyoutPresenter"
               BasedOn="{StaticResource BaseRoundedDrawerFlyoutPresenterStyle}">
            <Setter Property="utu:DrawerFlyoutPresenter.OpenDirection" Value="Up" />
        </Style>

^ CornerRadius="{TemplateBinding CornerRadius}" from RoundedDrawerFlyoutPresenterStyle to be added onto DefaultDrawerFlyoutPresenterStyle ^ {0}RoundedDrawerFlyoutPresenterStyle*{Base, 4Directions...} to be added to the user code, as they need to be customized ^ worth updating the docs

Xiaoy312 commented 11 months ago

This will be addressed in #906. Of note, both CornerRadius and the Background needs to be set from the FlyoutPresenterStyle now:

  ```xml
  <Flyout Placement="Full">
      <Flyout.FlyoutPresenterStyle>
          <Style BasedOn="{StaticResource BottomDrawerFlyoutPresenterStyle}" TargetType="FlyoutPresenter">
              <Setter Property="CornerRadius" Value="16,16,0,0" />
              <Setter Property="Background" Value="SkyBlue" />
          </Style>
      </Flyout.FlyoutPresenterStyle>

      <Border toolkit:VisibleBoundsPadding.PaddingMask="All" >
          <!-- flyout content -->
  </Flyout>

remarks: Do not set Background directly from the flyout content. Instead, Background should be set from style setter to avoid edge bleeding on certain platforms, and to avoid background being painted on the rounded corners.