MahApps - Changing the Style of a Tile with Binding in a Property of a Class - MVVM

1

I'm creating a dynamic menu using Tiles (MahApps). I have two types of Tiles that I can use: LargeTileStyle and SmallTileStyle . For this, I have a function that allows me to pass the Style name via parameter and set the Style property, when Tile is created.

Creating Tiles :

this.Tile.Add(
   new TileItem() 
   { 
       Icon = new PackIconFontAwesome() 
       { 
         Kind = PackIconFontAwesomeKind.Angellist 
       }, 
       Text = "Usuários", 
       Style = "LargeTileStyle", 
       Background = "Green", 
       NavigationDestination = new Uri("Views/UsuarioList.xaml", UriKind.RelativeOrAbsolute) 
    }
);

this.Tile.Add(
    new TileItem() 
    { 
        Icon = new PackIconFontAwesome() 
        { 
           Kind = PackIconFontAwesomeKind.Apple 
        }, 
        Text = "Clientes", 
        Style = "SmallTileStyle", 
        Background = "Blue", 
        NavigationDestination = new Uri("Views/ClienteList.xaml", UriKind.RelativeOrAbsolute) 
    }
);

Class TileItem :

internal class TileItem : BindableBase
    {
        private object _icon;
        private string _text;
        private string _style;
        private string _background;
        private DelegateCommand _command;
        private Uri _navigationDestination;


        public object Icon
        {
            get { return this._icon; }
            set { this.SetProperty(ref this._icon, value); }
        }

        public string Text
        {
            get { return this._text; }
            set { this.SetProperty(ref this._text, value); }
        }

        public string Style
        {
            get { return this._style; }
            set { this.SetProperty(ref this._style, value); }
        }

        public string Background
        {
            get { return this._background; }
            set { this.SetProperty(ref this._background, value); }
        }

        public ICommand Command
        {
            get { return this._command; }
            set { this.SetProperty(ref this._command, (DelegateCommand)value); }
        }

        public Uri NavigationDestination
        {
            get { return this._navigationDestination; }
            set { this.SetProperty(ref this._navigationDestination, value); }
        }

        public bool IsNavigation => this._navigationDestination != null;
    }

The problem is that in the block below, when I make a Binding to set the Style property, it does not work because it can not set itself with the names that I pass by parameter. Does anyone know how to help me?

Style:

<ResourceDictionary>          

            <Style x:Key="LargeTileStyle" TargetType="Controls:Tile">
                <Setter Property="Width" Value="300" />
                <Setter Property="Height" Value="125" />
                <Setter Property="TitleFontSize" Value="16" />
            </Style>

            <Style x:Key="SmallTileStyle" TargetType="Controls:Tile">
                <Setter Property="Width" Value="147" />
                <Setter Property="Height" Value="125" />
                <Setter Property="TitleFontSize" Value="16" />
            </Style>
        </ResourceDictionary> 

Layout of my Window:

<Grid>
        <ListBox ItemsSource="{Binding Tile}" ScrollViewer.HorizontalScrollBarVisibility="Disabled">
            <ListBox.ItemsPanel>
                <ItemsPanelTemplate>
                    <WrapPanel IsItemsHost="True"/>
                </ItemsPanelTemplate>                    
            </ListBox.ItemsPanel>
            <ListBox.ItemTemplate>
                <DataTemplate>
                    <controls:Tile
                        Title="{Binding Text}"
                        controls:ControlsHelper.MouseOverBorderBrush="{DynamicResource BlackBrush}"
                        Command="{Binding DataContext.TileClickCommand, RelativeSource={RelativeSource AncestorType=ListBox}}"
                        CommandParameter="{Binding}"
                        HorizontalTitleAlignment="Left"
                        Background="{Binding Background}"
                        Style="{Binding Style}"
                        TiltFactor="2">
                        <Image  Width="60"
                            Height="60"/>
                        <!--<Source="{Binding OmsConnectionTypeId, Converter={StaticResource ConnectionTypeToIconConverter}}"/>-->
                    </controls:Tile>
                </DataTemplate>
            </ListBox.ItemTemplate>
        </ListBox>       
    </Grid>
    
asked by anonymous 14.08.2017 / 23:22

1 answer

0

To access a style or some specific resource of your application, you can fetch it by name using the FindResource() method. To use this method, your class must belong to FrameworkElement , such as code behind ( .cs ) of a Window.

Style smallTileStyle = (Style)FindResource("SmallTileStyle"); 
Style largeTileStyle = (Style)FindResource("LargeTileStyle");

Change your class TileItem and change the type of the Style property to type Style :

internal class TileItem : BindableBase
{
    private object _icon;
    private string _text;
    private Style _style;
    private string _background;
    private DelegateCommand _command;
    private Uri _navigationDestination;


    public object Icon
    {
        get { return this._icon; }
        set { this.SetProperty(ref this._icon, value); }
    }

    public string Text
    {
        get { return this._text; }
        set { this.SetProperty(ref this._text, value); }
    }

    public Style Style
    {
        get { return this._style; }
        set { this.SetProperty(ref this._style, value); }
    }

    public string Background
    {
        get { return this._background; }
        set { this.SetProperty(ref this._background, value); }
    }

    public ICommand Command
    {
        get { return this._command; }
        set { this.SetProperty(ref this._command, (DelegateCommand)value); }
    }

    public Uri NavigationDestination
    {
        get { return this._navigationDestination; }
        set { this.SetProperty(ref this._navigationDestination, value); }
    }

    public bool IsNavigation => this._navigationDestination != null;
}

nomeDoSeuObjeto.Style = smallTileStyle;

When creating your Tiles, use the previously entered code to search for the desired styles and assign it to your TileItem object:

// Busca o style nos Resources (App.xaml)
Style smallTileStyle = (Style)FindResource("SmallTileStyle"); 
Style largeTileStyle = (Style)FindResource("LargeTileStyle");

// Atribui o style nos tiles criados
this.Tile.Add(
   new TileItem() 
   { 
       Icon = new PackIconFontAwesome() 
       { 
         Kind = PackIconFontAwesomeKind.Angellist 
       }, 
       Text = "Usuários", 
       Style = largeTileStyle, 
       Background = "Green", 
       NavigationDestination = new Uri("Views/UsuarioList.xaml", UriKind.RelativeOrAbsolute) 
    }
);

this.Tile.Add(
    new TileItem() 
    { 
        Icon = new PackIconFontAwesome() 
        { 
           Kind = PackIconFontAwesomeKind.Apple 
        }, 
        Text = "Clientes", 
        Style = smallTileStyle, 
        Background = "Blue", 
        NavigationDestination = new Uri("Views/ClienteList.xaml", UriKind.RelativeOrAbsolute) 
    }
);

In your XAML bind to the created property:

<Controls:Tile 
     Title="TileOne" 
     Style="{Binding Style}" 
     Margin="133,539,666,21" Width="Auto" Height="Auto" />
    
15.08.2017 / 22:23