Skip to content

Property

Name
Command
CommandParameter
ActionIcon
Icon
Title
SubTitle
TitleForeground
SubTitleForeground
DisplayMode

Example

xml
 <dev:RichButton Title="Decima" IsEnabled="True" SubTitle="Connected, secured">
     <dev:RichButton.Icon>
         <FontIcon Foreground="{ThemeResource SystemAccentColor}" Glyph="&#xE701;" />
     </dev:RichButton.Icon>
 </dev:RichButton>
 <dev:RichButton Title="Windows Update" SubTitle="Last checked: 1 hour ago">
     <dev:RichButton.Icon>
         <ImageIcon Width="22" Height="22" Source="ms-appx:///Assets/update.png" />
     </dev:RichButton.Icon>
 </dev:RichButton>

  <dev:RichButton DisplayMode="ReadOnly">
     <dev:RichButton.Icon>
         <Viewbox Width="92" Height="92" Margin="0,0,10,0">
             <FontIcon Foreground="{ThemeResource SystemAccentColor}" Glyph="&#xE701;" />
         </Viewbox>
     </dev:RichButton.Icon>

     <dev:RichButton.Title>
         <TextBlock FontSize="18" Style="{ThemeResource SubtitleTextBlockStyle}" Text="Wi-Fi (Decima)" />
     </dev:RichButton.Title>
     <dev:RichButton.SubTitle>
         <StackPanel Orientation="Horizontal" Spacing="5">
             <Viewbox Width="12" Height="12">
                 <FontIcon Foreground="{ThemeResource SystemAccentColor}" Glyph="&#xE774;" />
             </Viewbox>
             <TextBlock FontWeight="SemiBold" Foreground="{ThemeResource TextFillColorTertiaryBrush}" Style="{ThemeResource BaseTextBlockStyle}" Text="Connected, secured" />
         </StackPanel>
     </dev:RichButton.SubTitle>
 </dev:RichButton>
 <dev:RichButton Title="Properties" Width="150" SubTitle="Public network 5 GHz">
     <dev:RichButton.Icon>
         <FontIcon Glyph="&#xE946;" />
     </dev:RichButton.Icon>
 </dev:RichButton>
 <dev:RichButton Title="Data usage" SubTitle="0 MB, last 30 days">
     <dev:RichButton.Icon>
         <FontIcon Glyph="&#xEB05;" />
     </dev:RichButton.Icon>
     <dev:RichButton.ActionIcon>
         <Viewbox Width="16" Height="16">
             <FontIcon Glyph="&#xE76C;" />
         </Viewbox>
     </dev:RichButton.ActionIcon>
 </dev:RichButton>

   <dev:RichButton Title="Delete" DisplayMode="Normal">
      <dev:RichButton.Icon>
          <SymbolIcon Symbol="Delete" />
      </dev:RichButton.Icon>
  </dev:RichButton>
  <dev:RichButton Title="Delete" DisplayMode="Subtle">
      <dev:RichButton.Icon>
          <SymbolIcon Symbol="Delete" />
      </dev:RichButton.Icon>
  </dev:RichButton>
  <dev:RichButton DisplayMode="Normal">
      <dev:RichButton.Icon>
          <SymbolIcon Symbol="Delete" />
      </dev:RichButton.Icon>
  </dev:RichButton>
  <dev:RichButton DisplayMode="Subtle">
      <dev:RichButton.Icon>
          <SymbolIcon Symbol="Delete" />
      </dev:RichButton.Icon>
  </dev:RichButton>

   <dev:RichButton DisplayMode="ReadOnly">
     <dev:RichButton.Icon>
         <Border Width="110" Height="60" Background="Purple" CornerRadius="{ThemeResource ControlCornerRadius}" />
     </dev:RichButton.Icon>

     <dev:RichButton.Title>
         <TextBlock FontSize="18" Style="{ThemeResource SubtitleTextBlockStyle}" Text="DESKTOP-3R39MPM" />
     </dev:RichButton.Title>
     <dev:RichButton.SubTitle>
         <StackPanel Margin="0,-5,0,0" Spacing="5">
             <TextBlock FontWeight="SemiLight" Foreground="{ThemeResource TextFillColorPrimaryBrush}" Style="{ThemeResource BaseTextBlockStyle}" Text="GE60 2PC" />
             <HyperlinkButton Margin="-12,-10,0,0" Content="Rename" />
         </StackPanel>
     </dev:RichButton.SubTitle>
 </dev:RichButton>

AnimationPath

Demo

you can run demo and see this feature.

Released under the MIT License.