How to set the "Height" or "Width" of an image in XAML of a .net core WPF project

Question

I'm using AvalonDock (as a Docking solution) and it expect an ImageSource for its "avalonDock:LayoutAnchorable.IconSource" property.

I have this code:

        <avalonDock:LayoutRoot.LeftSide>
            <avalonDock:LayoutAnchorSide>
                <avalonDock:LayoutAnchorGroup>
                    <!--IconSource="pack://application:,,,/PtdcGui;component/Assets/Image/Scope.png"-->

                    <avalonDock:LayoutAnchorable
                        Title="AutoHide1 Content"
                        ContentId="AutoHide1Content">
                        <avalonDock:LayoutAnchorable.IconSource>
                            <BitmapImage DecodePixelHeight="20"
                                UriSource="pack://application:,,,/PtdcGui;component/Assets/Image/Scope.png">
                            </BitmapImage>
                        </avalonDock:LayoutAnchorable.IconSource>
                        <TextBox Text="{Binding TestTimer, Mode=OneWay, StringFormat='AutoHide Attached to Timer ->\{0\}'}" />
                    </avalonDock:LayoutAnchorable>
                    <avalonDock:LayoutAnchorable Title="AutoHide2 Content" ContentId="AutoHide2Content">
                        <StackPanel Orientation="Vertical">
                            <TextBox />
                            <TextBox />
                        </StackPanel>
                    </avalonDock:LayoutAnchorable>
                </avalonDock:LayoutAnchorGroup>
            </avalonDock:LayoutAnchorSide>
        </avalonDock:LayoutRoot.LeftSide>

The 20 pixels height Icon appears on screen with a height of around 32 pixels:

Appears Original:

How can I resize the Icon to a fixed height of 20?

Note: In .net core, it sounds like we should use BitmapImage which does not have a "Height" (or "width") property available in xaml.

Answer 1

The easiest way I have found is to place the icon in a Grid then you can adjust the size of the grid to change the size of the image.

for instance:

 <Grid Grid.Row="1" Grid.Column="1">
            <Grid.RowDefinitions>
                <RowDefinition Height="25"/>
                <RowDefinition Height="5"/>
                <RowDefinition Height="*"/>
            </Grid.RowDefinitions>
            
            <TextBlock Grid.Row="0" Name="TitleTextBlock" Text="Budgets" FontWeight="Bold"/>
            <Image Grid.Row="0" Name="SettingsImage" HorizontalAlignment="Right"></Image>
</Grid>

Then in the code-behind, you can do something like:

var icon = new PackIconFontAwesome() {Kind = PackIconFontAwesomeKind.AsteriskSolid};
Geometry geo = Geometry.Parse(icon.Data);
GeometryDrawing gd = new GeometryDrawing();
gd.Geometry = geo;
gd.Brush = icon.BorderBrush;
gd.Pen = new Pen(Brushes.White, 8);
DrawingImage geoImage = new DrawingImage(gd);
geoImage.Freeze();

SettingsImage.Source = geoImage;