将Mahapps.Metro：IconPacks分配给后面代码中的按钮

Question

I am trying to assign an icon from any Mahapps.Metro.IconPacks to an rectangle respectively to a button with text.

How do I do this if I want to use the new IconPacks?

Effectively I need to convert an Mahapps.Metro.IconPacks.PackIconModernKind to VisualBrush or canvas or actually anything I can use to place it in a button.

Any help is appreciated!

Thanks

Answer 1

You can place any IconPack Control directly to the content of the Button or to a container like a Grid .

The Xaml way

<Button Content="Test">
    <Button.ContentTemplate>
        <DataTemplate>
            <StackPanel Orientation="Horizontal">
                <iconPacks:PackIconMaterial Kind="Cookie"
                                            Margin="4 4 2 4"
                                            Width="24"
                                            Height="24"
                                            VerticalAlignment="Center" />
                <TextBlock Text="{Binding}"
                            Margin="2 4 4 4"
                            VerticalAlignment="Center" />
            </StackPanel>
        </DataTemplate>
    </Button.ContentTemplate>
</Button>

or

<Button>
    <StackPanel Orientation="Horizontal">
        <iconPacks:PackIconMaterial Kind="Cookie"
                                    Margin="4 4 2 4"
                                    Width="24"
                                    Height="24"
                                    VerticalAlignment="Center" />
        <TextBlock Text="Test"
                    Margin="2 4 4 4"
                    VerticalAlignment="Center" />
    </StackPanel>
</Button>

The code behind way of Xaml version 2

var stackPanel = new StackPanel() { Orientation = Orientation.Horizontal };
var packIconMaterial = new PackIconMaterial()
{
    Kind = PackIconMaterialKind.Cookie,
    Margin = new Thickness(4, 4, 2, 4),
    Width = 24,
    Height = 24,
    VerticalAlignment = VerticalAlignment.Center
};
stackPanel.Children.Add(packIconMaterial);
var textBlock = new TextBlock()
{
    Text = "Test",
    Margin = new Thickness(2, 4, 4, 4),
    VerticalAlignment = VerticalAlignment.Center
};
stackPanel.Children.Add(textBlock);
this.TestButton.Content = stackPanel;

Hope this helps.