Fluent Ribbon Control Suite + WPF

Hola CubaCoders:

Seguro muchos de ustedes se han dado cuenta que unas de las cosas más atractivas, en cuanto a diseño, que tiene el paquete ofimático de Microsoft es la barra de herramientas y seguro pensamos que podríamos hacer algunas aplicaciones con una barra similar y le darían un toque de profesionalidad y buen gusto y tenemos toda la razón por eso en el tutorial de hoy les voy a presentar a Fluent Ribbon Control Suite que no es más que una biblioteca que implementa la interfaz de usuario Microsoft Office Fluent, o sea del paquete ofimático de Microsoft, para Windows Presentation Foundation (WPF).

Lo primero como siempre será crear una WPF Application y la llamaremos FluentRibbon, el siguiente paso será agregar la biblioteca Fluent.dll, que les dejamos al final, si no sabes cómo agregar una biblioteca en Visual Studio puedes dirigirte a aquí.

Ahora vamos con el código, nos dirigimos a nuestro proyecto y le damos doble clic a App.xaml y allí dentro de la etiqueta <Application.Resources> vamos a escribir lo siguiente:

<ResourceDictionary>

           <ResourceDictionary.MergedDictionaries>

               <ResourceDictionary Source=”pack://application:,,,/Fluent;Component/Themes/Office2013/Generic.xaml” />

           </ResourceDictionary.MergedDictionaries>

       </ResourceDictionary>

Con esto lo que estamos haciendo es decirle a la aplicación que lea desde la biblioteca que hemos agregado y una vez hecho esto vamos a MainWindow.xaml que es la interfaz de usuario de nuestra aplicación y allí cambiaremos dentro de la etiqueta <Window> cambiaremos el tipo de etiqueta de Window a Fluent:RibbonWindow y agregaremos una referencia para que la interfaz pueda usar los componentes de la biblioteca de la forma siguiente:

xmlns:Fluent =”clr-namespace:Fluent;assembly=Fluent”

debemos tener en cuenta antes de compilar nuestro proyecto dirigirnos a MainWindow.xaml.cs y hace que la clase MainWindow herede de Fluent.RibbonWindow para evitar errores.

Agregar Tabs:

Para agregar los tabs o las pestañas que tiene encima el Office para que queden de esta forma:

Para eso usamos el siguiente código:

<Fluent:Ribbon>

       <!–Backsatge–>

       <Fluent:Ribbon.Menu>

           <Fluent:Backstage>          

           </Fluent:Backstage>

       </Fluent:Ribbon.Menu> 

       <!–Tabs–>

       <Fluent:RibbonTabItem Header=”Inicio”>

       </Fluent:RibbonTabItem>    

   </Fluent:Ribbon>

Estos códigos son bastante entendibles, el Backsatge es el menú Archivo que es el que cuando damos clic en él nos saca la barra lateral con las opciones de abrir documentos o guardar y el TabItem son todos los demás tabs de la barra.

 

Agregar elementos y grupos:

Para agregarle los elementos para que quede así:

Para esto usamos el siguiente código:

<Fluent:RibbonTabItem Header=”Inicio”>

           <Fluent:RibbonGroupBox Header=”Herramientas”>

               <Fluent:Button Name=”btn_crear” Header=”Crear” LargeIcon=”Iconos\ic_create_64.png”>

               </Fluent:Button>

               <Fluent:Button Name=“btn_copiar” Header=”Copiar” LargeIcon=”Iconos\ic_content_copy_64.png”/>

               <Fluent:Button Name=”btn_cortar” Header=”Cortar” LargeIcon=”Iconos\ic_content_cut_64.png”/>

               <Fluent:Button Name=”btn_pegar” Header=”Pegar” LargeIcon=”Iconos\ic_content_paste_64.png”/>

               <Fluent:Button Name=”btn_recortar” Header=”Recortar” LargeIcon=”Iconos\ic_crop_64.png”/>

           </Fluent:RibbonGroupBox>

       </Fluent:RibbonTabItem>

 

Bueno aquí solo comentar que el RibbonGroupBox es la etiqueta que se usa para agrupar los elementos en este caso bajo el nombre Herramientas, resaltar aquí que se puede utilizar cualquier elemento de WPF además de los botones como es el caso de un RadioButton o un CheckBox de la siguiente forma <Fluent:RadioButton>.

 

Agregar ToolTip:

El ToolTip son los consejos para usar la herramienta o una breve descripción de la misma

<Fluent:RibbonGroupBox Header=”Herramientas”>

               <Fluent:Button Name=”btn_crear” Header=”Crear” LargeIcon=”Iconos\ic_create_64.png”>

                   <Fluent:Button.ToolTip>

                       <Fluent:ScreenTip Title=”Crear” Width=”250″ 

                                         Image=”Iconos\ic_create_64.png”

                                         Text=”Este es el ToolTip de un boton”

                                          DisableReason=”Este control esta deshabilitado”/>

                   </Fluent:Button.ToolTip>

               </Fluent:Button>

               <Fluent:Button Name=”btn_copiar” Header=”Copiar” LargeIcon=”Iconos\ic_content_copy_64.png”/>

               <Fluent:Button Name=”btn_cortar” Header=”Cortar” LargeIcon=”Iconos\ic_content_cut_64.png”/>

               <Fluent:Button Name=”btn_pegar” Header=”Pegar” LargeIcon=”Iconos\ic_content_paste_64.png”/>

               <Fluent:Button Name=”btn_recortar” Header=”Recortar” LargeIcon=”Iconos\ic_crop_64.png”/>

           </Fluent:RibbonGroupBox>

 

Agregar una Paleta de colores:

<Fluent:DropDownButton Header=”Paleta” Size=”Middle”>

                   <Fluent:DropDownButton.Icon>

                       <Grid Width=”16″ Height=”16″>

                           <Image Source=”Iconos\ic_format_color_text_64.png”/>

                           <Border BorderThickness=”0″ VerticalAlignment=”Bottom” Height=”4″>

                               <Border.Background>

                                   <SolidColorBrush Color=”{Binding ElementName=colorGallery,Path=SelectedColor,FallbackValue=Black}”/>

                               </Border.Background>

                           </Border>             

                       </Grid>

                   </Fluent:DropDownButton.Icon>

                   <Fluent:ColorGallery x:Name=”colorGallery” SelectedColor=”Red” IsNoColorButtonVisible =”False”/>

                  

               </Fluent:DropDownButton>

 

Agregar Galleries:

 

<Fluent:InRibbonGallery MinItemsInRow=”1″ MaxItemsInRow=”4″

                                       ItemWidth=”50″ ItemHeight=”50″

                                       ItemsSource=”{Binding DataItems}”>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_1_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_2_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_3_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_4_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_5_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_6_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_7_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_8_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_9_64.png”/>

               </Fluent:InRibbonGallery>

 

Todo el código de la aplicación:

<Fluent:RibbonWindow x:Class=”FluentRibbon.MainWindow”

       xmlns=”http://schemas.microsoft.com/winfx/2006/xaml/presentation”

       xmlns:x=”http://schemas.microsoft.com/winfx/2006/xaml”

       xmlns:Fluent =”clr-namespace:Fluent;assembly=Fluent”

       Title=”MainWindow” Height=”350″ Width=”525″>

  

   <Fluent:Ribbon>

       <!–Backsatge–>

       <Fluent:Ribbon.Menu>

           <Fluent:Backstage>          

           </Fluent:Backstage>

       </Fluent:Ribbon.Menu>

      

       <!–Tabs–>

 

       <Fluent:RibbonTabItem Header=”Inicio”>

           <Fluent:RibbonGroupBox Header=”Herramientas”>

               <Fluent:Button Name=”btn_crear” Header=”Crear” LargeIcon=”Iconos\ic_create_64.png”>

                   <Fluent:Button.ToolTip>

                       <Fluent:ScreenTip Title=”Crear” Width=”250″

                                         Image=”Iconos\ic_create_64.png”

                                         Text=”Este es el ToolTip de un boton”

                                         DisableReason=”Este control esta deshabilitado”/>

                   </Fluent:Button.ToolTip>

              </Fluent:Button>

               <Fluent:Button Name=”btn_copiar” Header=”Copiar” LargeIcon=”Iconos\ic_content_copy_64.png”/>

               <Fluent:Button Name=”btn_cortar” Header=”Cortar” LargeIcon=”Iconos\ic_content_cut_64.png”/>

               <Fluent:Button Name=”btn_pegar” Header=”Pegar” LargeIcon=”Iconos\ic_content_paste_64.png”/>

               <Fluent:Button Name=”btn_recortar” Header=”Recortar” LargeIcon=”Iconos\ic_crop_64.png”/>

           </Fluent:RibbonGroupBox>

           <Fluent:RibbonGroupBox>

               <Fluent:DropDownButton Header=”Paleta” Size=”Middle”>

                   <Fluent:DropDownButton.Icon>

                       <Grid Width=”16″ Height=”16″>

                           <Image Source=”Iconos\ic_format_color_text_64.png”/>

                           <Border BorderThickness=”0″ VerticalAlignment=”Bottom” Height=”4″>

                               <Border.Background>

                                 <SolidColorBrush Color=”{Binding ElementName=colorGallery,Path=SelectedColor,FallbackValue=Black}”/>

                               </Border.Background>

                           </Border>                     

                       </Grid>

                   </Fluent:DropDownButton.Icon>

 

                   <Fluent:ColorGallery x:Name=”colorGallery” SelectedColor=”Red” IsNoColorButtonVisible =”False”/>       

               </Fluent:DropDownButton>

               <Fluent:InRibbonGallery MinItemsInRow=”1″ MaxItemsInRow=”4″

                                       ItemWidth=”50″ ItemHeight=”50″

                                       ItemsSource=”{Binding DataItems}”>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_1_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_2_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_3_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_4_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_5_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_6_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_7_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_8_64.png”/>

                   <Fluent:Button LargeIcon=”Iconos\ic_filter_9_64.png”/>

               </Fluent:InRibbonGallery>

           </Fluent:RibbonGroupBox>

       </Fluent:RibbonTabItem>

   </Fluent:Ribbon>

</Fluent:RibbonWindow>

 

Bueno y hasta aquí este tutorial sobre la biblioteca Fluent Ribbon Control Suite y WPF espero que les resulte provechoso y hasta el próximo tutorial.

Fluent

Share
Soy Ingeniero en Ciencias Informáticas, me encanta programar sobre todo en C# y Android

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *