Dewcontrols

A simple collection of controls and utility for UWP applications

Download .zip Download .tar.gz View on GitHub

DEW CONTROLS

About the controls

This is a set of controls (hope to expand it soon) for UWP platform.
I develop primarly on phone, desktop and tablet. Sincerely I don't know how these controls will approach on devices like HoloLens or xbox-one.
However, I will update the repository if I find news about this.

For more information you can check the inline documentation

Helpers

In the namespace DewCommonLibrary you can find some helper and some converter. Converters:

  • BoolToVisibilityConverter
  • VisibilityToBoolConverter
  • DebugConverter
  • ColorToNullableColor
  • NullToVisibilityConverter

Helpers:

  • AppSettings - An easy way to use localsettings

Controls list

  • Hamburger drawer
  • Dialog Window
  • Toast alerts
  • Toast loader
  • Float Button

Work in progress

  • Waffle menu

Microsoft Community Toolkit

In this version I've removed AppStudio and I started to use Microsoft Community Toolkit.

Hamburger

The Hamburger is highly customizable. You can check the customizable properties here.

Properties

  • HamburgerType: enum
    values: LeftSide, LeftSideCompact, LeftSideCompactInLine, LeftSideInLine, RightSide, RightSideCompact, RightSideCompactInLine, RightSideInLine
  • HamburgerButtonAnimation: enum
    values: No, ToArrow, ToVertical
  • IsPaneOpeend: bool - Get or set the value of panel (and open and close it)
  • IsSwipeOpenEnabled: bool - Get or set the value of "open with swipe" feature
  • IsHamburgerButtonAnimationEnabled: bool - Get or set the value for the "hamburger button animation feature"
  • BarBackgroundColor: Brush - The top bar background
  • BarContent: UIElement - The content of the top bar
  • HamburgerForeground: Brush - The hamburger button foreground
  • HamburgerBackground: Color - The hamburger button background color
  • HamburgerBackgroundPressed: Color - The hamburger button background color when pressed
  • PaneBackground: Brush - The panel background
  • PaneContent: UIElement - The panel content
  • ContentBackground: Brush - The main content background
  • OpenedPaneLength: double - The size of opened panel
  • Content: UIElement - The main content

Events

  • HamburgerTapped: TappedEventHandler - Fired when hamburger button is tapped (not with swipe)
  • PaneClosed: TypedEventHandler - Fired when panel is closed
  • PaneClosing: TypedEventHandler - Fired when panel is closing

Methods

There aren't public methods

Example

<dc:DewHamburgerMenu x:Name="MainMenu"  
    BarBackgroundColor="Transparent"   
    ContentBackground="Transparent"   
    PaneBackground="Transparent"   
    HamburgerType="LeftSideCompact">    
    <dc:DewHamburgerMenu.PaneContent>  
            <!-- pane stuff -->  
    </dc:DewHamburgerMenu.PaneContent>  
    <dc:DewHamburgerMenu.BarContent>  
            <TextBlock Text="" x:Name="HamburgerTitle" FontSize="28" VerticalAlignment="Center" HorizontalAlignment="Center" Foreground="WhiteSmoke" Margin="0,0,30,0"/>  
    </dc:DewHamburgerMenu.BarContent>  
    <dc:DewHamburgerMenu.Content>  
        <Grid>  
            <Frame x:Name="PageFrame"  /> 
        </Grid>  
    </dc:DewHamburgerMenu.Content>  
</dc:DewHamburgerMenu>

Some screens

Toast popup

The toast popup is really cute and you can use it to give a feedback to the user about an operation, or obviously, whatever you want.

Properties

  • MessageFontFamily: FontFamily - The font family for text in the toast
  • MessageFontSize: double - The font size in the toast
  • CornerRadius: CornerRadius - The toast corners
  • Background: Brush - Toast background
  • MessageForeground: Brush - Toast text foreground
  • Message: string - The popup text
  • IsVisible: bool - Set or get the visibility property

Events

There aren't Events

Methods

  • ShowPopupMessageAsync(string:The toast message ,int:Time to popup hide (in ms, 0 = infinite),int: Animation time (in ms)): Task (awaitable)
  • HidePopupMessageAsync(int: Animation time (in ms)): Task (awaitable)

Example

In view xaml (note: the z-index is your discrection)

 <dc:DewToastPopup Margin="50" Background="WhiteSmoke" MessageFontSize="15" VerticalAlignment="Bottom" HorizontalAlignment="Center" x:Name="Popup" 
                          MessageForeground="Black"/>

In code behind

await Popup.ShowPopupMessageAsync("example", 2000);

Some screens

Loader toast

This is a simple toast that contains a text and a loader ring. It's a simple way to show a loader with a message.

Properties

  • RingPosition: enum
    values:Top, Bottom
  • MessageFontFamily: FontFamily - The font family for text in the toast
  • MessageFontSize: double - The font size in the toast
  • CornerRadius: CornerRadius - The toast corners
  • MessageForeground: Brush - Toast text foreground
  • Message: string - The popup text
  • Background: Brush - Toast background
  • IsRingEnabled: bool - Set\get the ring abilitation
  • IsRingActive: bool - Set\get the ring activation
  • IsVisible: bool - Set or get the visibility property

Events

There aren't Events

Methods

  • ShowPopupLoaderAsync(int:the animation time): Task (awaitable)
  • ShowPopupLoaderAsync(string:The message, int:the animation time): Task (awaitable)
  • HidePopupLoaderAsync(int:the animation time): Task (awaitable)

Example

In view xaml (note: the z-index is your discrection)

 <dc:DewLoader Margin="50" Background="WhiteSmoke" MessageFontSize="15" VerticalAlignment="Bottom" HorizontalAlignment="Center" x:Name="Loader" 
                          MessageForeground="Black"/>

In code behind

await Loader.ShowPopupLoaderAsync("example", 2000);

Dialog Window

Here we have a simple dialog control. You can customize it however you want. The buttons must be defined in the buttons style properties.

Properties

  • DewDialogType: enum
    values: OnlyTopBar (no buttons are showed), TopBarWithButtons (complete dialog window), TopBarAcceptButton (top bar with only right button), Nothing (only content)
  • DialogTitle: string - Set\get the top bar text
  • CloseGlyphForeground: SolidColorBrush - The X button foreground
  • TopBarBackground: Brush - The top bar background
  • TopBarForeground: SolidColorBrush - The top bar foreground
  • ContentBackground: Brush - The content background
  • Content: UIElement - The content's content ( :| )
  • ButtonAreaBackground: Brush - The button area background
  • LeftButtonStyle: Style - Define the content and the button's style
  • RightButtonStyle: Style - Define the content and the button's style
  • IsVisible: bool - Set\get the control's visibility
  • IsTopBarVisible: bool - Set\get the top bar visibility
  • IsButtonAreaVisibile: bool - Set\get the buttons bar visibility
  • IsLeftButtonVisible: bool - Set\get the left button visibility

Events

  • LeftButtonTapped: TappedEventHandler(object: Content,TappedRoutedEventArgs)
  • RightButtonTapped: TappedEventHandler(object: Content ,TappedRoutedEventArgs)
  • CloseButtonTapped: TappedEventHandler(object: Content ,TappedRoutedEventArgs)
  • DialogOpening: OpenEventHandler(object: Content)

Methods

  • ShowDialogAsync(int:the animation time): Task (awaitable)
  • HideDialogAsync(int:the animation time): Task (awaitable)

Example

In view xaml (note: the z-index is your discrection)

 <dc:DewDialog DialogType="TopBarWithButtons" x:Name="Dialog" ContentBackground="#cc000000" TopBarBackground="Transparent" 
                          ButtonAreaBackground="Transparent" DialogOpening="Dialog_DialogOpening"
                      RightButtonTapped="Dialog_RightButtonTapped"
                          LeftButtonTapped="Dialog_LeftButtonTapped"
                      CloseGlyphForeground="White" IsVisible="False">
              <!-- content stuff -->

                <dc:DewDialog.RightButtonStyle>
                    <Style TargetType="Button" BasedOn="{StaticResource UWButtonLayer}">
                        <Setter Property="Content">
                            <Setter.Value>
                                <TextBlock Text="" x:Uid="CreateCollectionButton"></TextBlock>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </dc:DewDialog.RightButtonStyle>
                <dc:DewDialog.LeftButtonStyle>
                    <Style TargetType="Button" BasedOn="{StaticResource UWButtonLayer}">
                        <Setter Property="Content">
                            <Setter.Value>
                                <TextBlock Text="" x:Uid="CancelButton"></TextBlock>
                            </Setter.Value>
                        </Setter>
                    </Style>
                </dc:DewDialog.LeftButtonStyle>
            </dc:DewDialog>

In code behind

await Loader.ShowDialogAsync(500);

Some screens

Float Button

This control is similar to the button in Google Inbox App. It's high customizable but also easy to use. I've used a mutual exclusion pattern to made this. You have a default ListView in the DewFloatButton container for an immediate use, but you can also write in the DewFloatButton container whatever you want, let's see how.

Custom stuff

The DewFloatButton control has a content control that can show whathever you want through the property FloatButtonListView (don't be confused by name, the property is an UIElement and can be whatever you want, I've just used this name because the default use of DewFloatButton is with a ListView). This property is in mutual exclusion with FlyoutItemsSource where, if FlyoutItemsSource is null the FloatButtonListView is showed.

Es.

<dc:DewFloatButton x:Name="FloatButton" 
                           Margin="10,10,20,30" VerticalAlignment="Bottom" Tapped="FloatButton_Tapped" 
                           DewFloatButtonBackground="#FF5AC350" 
                           DewFloatButtonClosed="FloatButton_FloatButtonClosed" 
                           DewFloatButtonOpened="FloatButton_FloatButtonOpened"                            
                           HorizontalAlignment="Right"                            
                           FlyoutWidth="250"
                           FlyoutMaxHeight="500">
            <dc:DewFloatButton.DewFloatButtonContent>
                <FontIcon Glyph="&#xE109;" Foreground="WhiteSmoke" ></FontIcon>
            </dc:DewFloatButton.DewFloatButtonContent>
            <dc:DewFloatButton.DewFloatButtonListView>
                <TextBlock>
                    Mmm, I want just a text in here
                </TextBlock>
            </dc:DewFloatButton.DewFloatButtonListView>
        </dc:DewFloatButton>

There are also a lot of properties that work with the default ListView and, obviously if you set them are unuseful if you user your stuff in FloatButtonListView.

Work with default ListView

If you don't want spend much time working on a particular custom listview (or whatever you want) you can use the default ListView in DewFloatButton control. You just need to bind the FlyoutItemsSource to a collection of DewFloatButtonItem. A DewFloatButtonItem is an class that contains two properties, an event and a method:

  • Icon: UIElement - This field should be a graphic element like an icon, FontIcon, image, etc. Don't set it if you don't want show it.
  • Text: string - The item text
  • OnSelected: DewFloatButtonSelectedHandler(object, SelectionChangedEventArgs) - Selected item handler
  • Selected: void(object, SelectionChangedEventArgs)_ - Invoke the handler if you need

The DewFloatButton ListView will be automatically populated. The default ListView works in differents ways. You can set those ways through the DewFloatButton properties for items.

Es.

  <dc:DewFloatButton x:Name="FloatButton" 
                           Margin="10,10,20,30" VerticalAlignment="Bottom" Tapped="FloatButton_Tapped" 
                           DewFloatButtonBackground="#FF5AC350" 
                           DewFloatButtonClosed="FloatButton_FloatButtonClosed" 
                           DewFloatButtonOpened="FloatButton_FloatButtonOpened" 
                           SelectedEvidence="Yes" FlyoutItemsSource="{x:Bind ViewModel.DewItemsCollection, Mode=OneWay}"
                           CloseAfterSelect="Yes"
                           HorizontalAlignment="Right" 
                           ItemTextFontSize="22"
                           FlyoutWidth="250"
                           FlyoutMaxHeight="500"
                           ItemHeight="60"
                           ItemTextForeground="White"
                           ItemTextBackground="Transparent"
                           IsAnimationActive="True"
                           ItemTextHorizontalAlignment="Right"
                           >
            <dc:DewFloatButton.DewFloatButtonContent>
                <FontIcon Glyph="&#xE109;" Foreground="WhiteSmoke" ></FontIcon>
            </dc:DewFloatButton.DewFloatButtonContent>

        </dc:DewFloatButton>

Properties

  • CloseAfterSelectedEnum: enum
    values: Yes, No
  • SelectedEvidenceEnum: enum
    values: Yes, No
  • DewFloatbuttonListView: UIElement - The container to show custom stuff
  • DewFloatButtonContent: UIElement - The content of DewFloatButton button
  • DewFloatButtonBackground: Brush - DewFloatButton button background
  • FlyoutMaxHeight: double - The max height for DewFloatButton container
  • ItemTextFontSize: double - The item text font size
  • ItemTextFontFamily: FontFamily - The item text font family
  • ItemTextForeground: Brush - The item text foreground
  • ItemTextBackground: Brush - The item text background
  • ItemTextHorizontalAlignment: HorizontalAlignment - The item text horizontal alignment
  • ItemBackground: Brush - The full item background
  • FlyoutWidth: double - The width of DewFloatButton container
  • ItemHeight: double - The item height
  • FlyoutItemsSource: ICollection<DewFloatButtonItem> - The itemsource for default ListView
  • ButtonStyle: Style - A custom style for DewFloatButton
  • FlyoutStyle: Style - A custom style for flyout element (DewFloatButton container)
  • IsAnimationActive: bool - True if you want animation for DewFloatButton, false if not
  • IsOpened: bool - Return the state of DewFloatButton container
  • SelectedEvidence: SelectedEvidenceEnum - Indicates if an item selected should be highlighted
  • CloseAfterSelect: CloseAfterSelectedEnum - Indicates if DewFloatButton container must be closed after than an element has been selected

Events

  • Tapped: TappedEventHandler(object: Content,TappedRoutedEventArgs)
  • DewFloatButtonClosed: Action()
  • DewFloatButtonOpened: Action()

Methods

  • CloseFlyout(): void

Example

See first section

Some screens

List Selector

This is a simple control that show a list of item where you can check them.

Properties

  • CheckBoxBorderForeground: SolidColorBrush - The checkbox border foreground
  • ContainerBackground: Bursh - The container background
  • Items: ICollection<DewListSelectorItem> - The list selector items
  • SeparatorForeground: SolidColorBrush - The item SeparatorForeground
  • TextListForeground: SolidColorBrush - The list items foreground
  • TextTitleForeground: SolidColorBrush - The title foreground
  • TextTitle: string - The title

Events

  • OnChecked: TappedEventHandler - Fired after the item has changed value

Example

<tk:DropShadowPanel ShadowOpacity="1" BlurRadius="10" HorizontalAlignment="Center" VerticalAlignment="Center" OffsetX="0" OffsetY="0">
                    <dc:DewListSelector OnChecked="listsel_OnChecked" Width="300" Height="Auto" HorizontalAlignment="Center" TextListForeground="#FF303030" ContainerBackground="WhiteSmoke"
                                        SeparatorForeground="#FFC5C5C5"
                                        VerticalAlignment="Center" x:Name="listsel" TitleText="New point of view" TextTitleForeground="#FF0E0E0E" CheckBoxBorderForeground="#FF323232">
                    </dc:DewListSelector>
                </tk:DropShadowPanel>

Some screens

Other sources

See in action

You can see some of those controls in the Photove App

Nuget

You can find controls on nuget

Some docs

andrewdev