How To Use a XAML Resource As An Icon In Mahapps.Metro Title Bar?

Question

I have a small application, using the Mahapps Metro Framework. I would like to change the icon in the title bar like connect/disconnect icon. How can i access the content or bind it dynamically?

This is my XAML:

<Controls:MetroWindow x:Class="NFCAgent.MainWindow"
                  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                  xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
                  Title="NFC-Agent"
                  Height="55"
                  Width="250"
                  ResizeMode="NoResize"
                  GlowBrush="{DynamicResource AccentColorBrush}"
                  WindowStartupLocation="Manual"
                  Topmost="True"
                  ShowIconOnTitleBar="True">
<Controls:MetroWindow.LeftWindowCommands>
    <Controls:WindowCommands>
        <Button IsEnabled="False" >
            <StackPanel Orientation="Horizontal">
                <Rectangle x:Name="headerLogo" Width="20" Height="20"
               Fill="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}">
                    <Rectangle.OpacityMask>
                        <VisualBrush Stretch="Fill"
                     Visual="{DynamicResource appbar_cupcake}" />
                    </Rectangle.OpacityMask>
                </Rectangle>
            </StackPanel>
        </Button>
    </Controls:WindowCommands>
</Controls:MetroWindow.LeftWindowCommands>
<Grid>
    <StackPanel Orientation="Horizontal">
        <Rectangle Width="25" Height="25" Margin="4 0">
            <Rectangle.Fill>
                <VisualBrush Visual="{DynamicRessource appbar_add}" />
            </Rectangle.Fill>
        </Rectangle>
        <TextBlock x:Name="txtStatus" Text="Statusinfo" VerticalAlignment="Center"></TextBlock>
    </StackPanel>
</Grid>

Addition: I have no ImageFile (no *.ico), i use the Resources that are included in Mahapps.Resources (xaml-Files). Afaik the content of the Rectangle must be replaced in some way - but how?

`MetroWindow` has an `Icon` property you can assign or bind to. — jsanalytics, Dec 23 '15 at 13:54
'Icon' needs an ImageSource - how can i do this with the StaticRessource Keys? — Daniel, Dec 23 '15 at 14:00
You can simply give the name of the file to be used. The file must've been added to your project. — jsanalytics, Dec 23 '15 at 14:02
I don't know the filename, because I'm using the StaticResources :( — Daniel, Dec 23 '15 at 14:06
Possible duplicate of [How do I add a Window Icon to a MahApps.Metro WPF app?](http://stackoverflow.com/questions/34362017/how-do-i-add-a-window-icon-to-a-mahapps-metro-wpf-app) — Thomas Freudenberg, Dec 23 '15 at 17:45
Have you figured this out? You need to have a property of type `Visual` in your `ViewModel` and do a normal binding. — jsanalytics, Dec 30 '15 at 11:36
Thank you for your answer jstreet, i'm figuring this out at a later time... or maybe do some workaround if i'm too confused about it :D — Daniel, Jan 04 '16 at 07:31

score 3 · Accepted Answer · answered Jan 04 '16 at 15:48

You can achieve that by keeping your icon resource in your ViewModel and using regular binding:

XAML:

<Controls:MetroWindow x:Class="WpfApplication4.Window4"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Controls="http://metro.mahapps.com/winfx/xaml/controls"
    xmlns:local="clr-namespace:WpfApplication4"
    mc:Ignorable="d"
    BorderThickness="5"        
    BorderBrush="{DynamicResource AccentColorBrush}"
    Title="{Binding MyIcon}" Height="300" Width="300" Loaded="MetroWindow_Loaded">
<Window.Resources>
    <ResourceDictionary>
        <ResourceDictionary.MergedDictionaries>
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Colors.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro.Resources;component/Icons.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/Olive.xaml" />
            <ResourceDictionary Source="pack://application:,,,/MahApps.Metro;component/Styles/Accents/BaseDark.xaml" />
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>
</Window.Resources>

<Controls:MetroWindow.LeftWindowCommands>
    <Controls:WindowCommands>
        <Rectangle Height="20" Width="20" Fill="{Binding RelativeSource={RelativeSource AncestorType=Controls:WindowCommands}, Path=Foreground}">
            <Rectangle.OpacityMask>
                <VisualBrush Stretch="Fill" Visual="{Binding MyResource}" />
            </Rectangle.OpacityMask>
        </Rectangle>
    </Controls:WindowCommands>
</Controls:MetroWindow.LeftWindowCommands>

<Controls:MetroWindow.DataContext>
    <local:MyViewModel/>
</Controls:MetroWindow.DataContext>

<Grid>
    <Button Content="Change Icon" Click="Button_Click" HorizontalAlignment="Center" VerticalAlignment="Center"></Button>
</Grid>

Window:

public partial class Window4 : MetroWindow
{
    MyViewModel viewModel;

    public Window4()
    {
        InitializeComponent();
    }

    private void MetroWindow_Loaded(object sender, RoutedEventArgs e)
    {
        viewModel = new MyViewModel();
        DataContext = viewModel;

        viewModel.MyIcon = "appbar_box";
        viewModel.MyResource = (Visual)Resources[viewModel.MyIcon]; 
    }

    private void Button_Click(object sender, RoutedEventArgs e)
    {
        if (viewModel.MyIcon == "appbar_box")
            viewModel.MyIcon = "appbar_add";
        else viewModel.MyIcon = "appbar_box";

        viewModel.MyResource = (Visual)Resources[viewModel.MyIcon];
    }
}

ViewModel:

public class MyViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    public MyViewModel()
    {
    }

    private string myIcon;
    public string MyIcon
    {
        get { return myIcon; }
        set
        {
            if (value != myIcon)
            {
                myIcon = value;
                NotifyPropertyChanged();
            }
        }
    }

    private Visual myResource;
    public Visual MyResource
    {
        get { return myResource; }
        set
        {
            if (value != myResource)
            {
                myResource = value;
                NotifyPropertyChanged();
            }
        }
    }

    private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
        }
    }
}

How would you access Resources from the view model and not from the MetroWindow partial class? — blueshift, May 23 '16 at 14:11
I found the answer to my question and added it to the set of answers for this question. — blueshift, May 23 '16 at 14:51

score 0 · Answer 2 · answered May 23 '16 at 14:50

Although an answer has been accepted for this question, here is my solution that does not require code in the MetroWindow partial class (though it does require a reference to System.Windows in the view model and the use of the Application Dispatcher).

using System;
using Caliburn.Micro;
using System.Windows.Media;
using System.Windows;

namespace ChangingMahAppsIcon
{
    class CHeartbeatViewModel : PropertyChangedBase
    {
        public Visual IconResource { get; set; }

        private System.Timers.Timer m_oHeartbeatTimer;
        private ResourceDictionary m_oIconResource;
        private bool m_bHeartbeatIsOn = false;

        public CHeartbeatViewModel()
        {
            m_oIconResource = new ResourceDictionary() { Source = new Uri(@"Resources\Icons.xaml", UriKind.Relative) };

            m_oHeartbeatTimer = new System.Timers.Timer(1000);
            m_oHeartbeatTimer.Elapsed += UpdateHeartbeat;

            m_oHeartbeatTimer.Start();

        }

        private void UpdateHeartbeat(object sender, System.Timers.ElapsedEventArgs e)
        {
            string strIconName;
            m_bHeartbeatIsOn = !m_bHeartbeatIsOn;
            if (m_bHeartbeatIsOn)
            {
                strIconName = "appbar_heart";
            }
            else
            {
                strIconName = "appbar_heart_outline";
            }

            Application.Current.Dispatcher.Invoke((System.Action)delegate {

                IconResource = (Visual)m_oIconResource[strIconName];
                NotifyOfPropertyChange(() => IconResource);
            });

        }
    }
}

How To Use a XAML Resource As An Icon In Mahapps.Metro Title Bar?

2 Answers2