We Keep Coding

How to place on spinbutton on top of another in NumericUpDown? | Avalonia UI

Default NumericUpDown looks like that:
,
and because of buttons take a lot of place I want to make it more Windows form style, like this:
.
I've tried to play with ButtonSpinner Styles, but didn't work out, it shrinks the whole NumericUpDown, not only ButtonSpinner (even if I write another style for NumericUpDown).
<Style Selector="ButtonSpinner">
<Setter Property="Height">
<Setter.Value>
10
</Setter.Value>
</Setter>
<Setter Property="Width">
<Setter.Value>
25
</Setter.Value>
</Setter>
</Style>
What I should do to achieve desired result?

There are two solutions:
You could modify the ButtonSpinner template (or NumericUpDown /template/ ButtonSpinner template) to use the UniformGrid with 2 rows instead of StackPanel with horizontal orientation used by the Fluent theme. However you may encounter some problems with missing static resources, so you have to remember to include them in your file.
You could use the Simple theme instead of Fluent one. It uses a template with UniformGrid with 2 rows by default, but it would change the look of all controls.

So, #radoslawik proposed a good solution, but there was one problem -- he linked to nightly build of Avalonia and you may use another version. If you are you must find source code of your version (they are tagged in github) and look up styles there. For my version (0.10.18 -- it's last non-preview available at the moment) solution is next:
<Window.Styles>
<Style Selector="NumericUpDown /template/ ButtonSpinner">
<Setter Property="Template">
<ControlTemplate>
<DataValidationErrors>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="{TemplateBinding CornerRadius}"
MinHeight="{TemplateBinding MinHeight}">
<DockPanel>
<UniformGrid Rows="2" Name="PART_SpinnerPanel"
DockPanel.Dock="Right"
IsVisible="{TemplateBinding ShowButtonSpinner}">
<RepeatButton Name="PART_IncreaseButton"
Classes="ButtonSpinnerRepeatButton"
VerticalContentAlignment="Center"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
FontSize="{TemplateBinding FontSize}">
<Path Fill="{TemplateBinding Foreground}"
Width="16"
Height="8"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{StaticResource ButtonSpinnerIncreaseButtonIcon}" />
</RepeatButton>
<RepeatButton Name="PART_DecreaseButton"
Classes="ButtonSpinnerRepeatButton"
Foreground="{TemplateBinding Foreground}"
BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
VerticalContentAlignment="Center"
FontSize="{TemplateBinding FontSize}">
<Path Fill="{TemplateBinding Foreground}"
Width="16"
Height="8"
Stretch="Uniform"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Data="{StaticResource ButtonSpinnerDecreaseButtonIcon}" />
</RepeatButton>
</UniformGrid>
<ContentPresenter Name="PART_ContentPresenter"
Grid.Column="1"
ContentTemplate="{TemplateBinding ContentTemplate}"
Content="{TemplateBinding Content}"
HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"
Padding="{TemplateBinding Padding}" />
</DockPanel>
</Border>
</DataValidationErrors>
</ControlTemplate>
</Setter>
</Style>
</Window.Styles>

How do I automatically expand my WPF tabitem to fit the header text?

enter image description here
Basically, this is what it looks like, I want my tabitem to automatically make the header text fit inside the tabitem. Thanks.

WPF tabitem widths are adaptive unless you specify a width. If you don't specify a width, check if you have fixed the width of the content control or container when you define the TabItem style.
<TabControl>
<TabItem Header="long"/>
<TabItem Header="longlonglonglong"/>
</TabControl>
Initial control template
<ControlTemplate TargetType="{x:Type TabItem}">
<Grid x:Name="templateRoot" SnapsToDevicePixels="true">
<Border x:Name="mainBorder" Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="1" Margin="0">
<Border x:Name="innerBorder" Background="{StaticResource TabItem.Selected.Background}" BorderBrush="{StaticResource TabItem.Selected.Border}" BorderThickness="1" Margin="-1" Opacity="0"/>
</Border>
<ContentPresenter x:Name="contentPresenter" ContentSource="Header" Focusable="False" HorizontalAlignment="{Binding HorizontalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{Binding VerticalContentAlignment, RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}"/>
</Grid>
</ControlTemplate>

WPF GroupBox Header location in center

I have edited the standard GroupBox template as I wanted to customize it. Apart from other customizations, I wanted the GroupBox header to be Horizontally aligned in the Center instead of Left or Right. The alignment of the Header is not a problem however, the real problem is the OpacityMask defined for the Border controls. The opacity mask sets the transparent space behind the group box header where the borders are not drawn. I haven't able to figure it out how to place the transparent space gap behind the group box header when I set the header to the center.
<ControlTemplate x:Key="GroupBoxControlTemplate1" TargetType="{x:Type GroupBox}">
<Grid SnapsToDevicePixels="True">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="6"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="6"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="6"/>
</Grid.RowDefinitions>
<Border Background="{TemplateBinding Background}" BorderBrush="Transparent"
BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="4" Grid.Column="1" Grid.ColumnSpan="4"
Grid.Row="1" Grid.RowSpan="3" HorizontalAlignment="Stretch"/>
<Border x:Name="Header" Grid.Column="2" Grid.RowSpan="2" HorizontalAlignment="Left"
Padding="3,1,3,0" VerticalAlignment="Stretch">
<Border.Effect>
<DropShadowEffect BlurRadius="10" Direction="334"/>
</Border.Effect>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Content="{TemplateBinding Header}"
ContentSource="Header"
ContentStringFormat="{TemplateBinding HeaderStringFormat}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
RecognizesAccessKey="True" Height="Auto"
VerticalAlignment="Center"
HorizontalAlignment="Center"
OpacityMask="#FF3844BD" Margin="0,1,0,0">
</ContentPresenter>
</Border>
<ContentPresenter Margin="{TemplateBinding Padding}"
SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"
Content="{TemplateBinding Content}"
ContentStringFormat="{TemplateBinding ContentStringFormat}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Grid.Column="1" Grid.ColumnSpan="2" Grid.Row="2"/>
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}"
CornerRadius="4" Grid.ColumnSpan="3" Grid.Row="1" Grid.RowSpan="3" RenderTransformOrigin="0.5,0.5" Margin="0">
<Border.OpacityMask>
<MultiBinding ConverterParameter="7" UpdateSourceTrigger="Default">
<MultiBinding.Converter>
<BorderGapMaskConverter/>
</MultiBinding.Converter>
<Binding Path="ActualWidth" ElementName="Header"/>
<Binding Path="ActualWidth" RelativeSource="{RelativeSource Self}"/>
<Binding Path="ActualHeight" RelativeSource="{RelativeSource Self}"/>
</MultiBinding>
</Border.OpacityMask>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4">
<Border BorderBrush="White" BorderThickness="{TemplateBinding BorderThickness}" CornerRadius="4"/>
</Border>
</Border>
</Grid>
</ControlTemplate>
The header text should be at the center of the GroupBox currently it is on the left side which is the default position of GroupBox.

By link here specify, you need to modify parameter value. But ConverterParameter is not a DependencyProperty, you cannot bind any value to it. I suggest you write your own converter to return VisualBrush to your GroupBox
You can also check source code of BorderGapMaskConverter here

The text box bottom border on UWP application is not visible

I am a creating a UWP application for the first time and I am encountering a weird problem where textbox's bottom border disappears if the textbox height is less than 32 (Default textbox size).
I want the textbox to be of height 25 and not 32. So, what should I do to get the bottom border of the textbox to remain and the size of textbox be 25?

In short, you need to make a custom style for your TextBox.
The steps: Go to 'Document Outline -> Right click your TextBox -> Edit Template -> Edit a Copy.'
Then, find the <Border x:Name="BorderElement"> element in this style and set its MinHeight that you want.
<Page.Resources>
<Style x:Key="TextBoxStyle1" TargetType="TextBox">
...
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
...
<ContentPresenter x:Name="HeaderContentPresenter" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.ColumnSpan="2" Grid.Column="0" FontWeight="Normal" Foreground="{ThemeResource TextControlHeaderForeground}" Margin="{StaticResource TextBoxTopHeaderMargin}" Grid.Row="0" TextWrapping="Wrap" VerticalAlignment="Top" Visibility="Collapsed" x:DeferLoadStrategy="Lazy" />
<Border x:Name="BorderElement" MinHeight="25" Background="{TemplateBinding Background}" BorderThickness="{TemplateBinding BorderThickness}" BorderBrush="{TemplateBinding BorderBrush}" CornerRadius="{TemplateBinding CornerRadius}" Grid.ColumnSpan="2" Grid.Column="0" Control.IsTemplateFocusTarget="True" MinWidth="{ThemeResource TextControlThemeMinWidth}" Grid.RowSpan="1" Grid.Row="1" />
<ScrollViewer x:Name="ContentElement" AutomationProperties.AccessibilityView="Raw" Grid.Column="0" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsTabStop="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" ZoomMode="Disabled" />
<TextBlock x:Name="PlaceholderTextContentPresenter" Grid.ColumnSpan="2" Grid.Column="0" Foreground="{Binding PlaceholderForeground, RelativeSource={RelativeSource Mode=TemplatedParent}, TargetNullValue={ThemeResource TextControlPlaceholderForeground}}" IsHitTestVisible="False" Margin="{TemplateBinding BorderThickness}" Padding="{TemplateBinding Padding}" Grid.Row="1" Text="{TemplateBinding PlaceholderText}" TextWrapping="{TemplateBinding TextWrapping}" TextAlignment="{TemplateBinding TextAlignment}" />
<Button x:Name="DeleteButton" AutomationProperties.AccessibilityView="Raw" BorderThickness="{TemplateBinding BorderThickness}" Grid.Column="1" FontSize="{TemplateBinding FontSize}" IsTabStop="False" MinWidth="34" Margin="{ThemeResource HelperButtonThemePadding}" Grid.Row="1" Style="{StaticResource DeleteButtonStyle}" VerticalAlignment="Stretch" Visibility="Collapsed" />
<ContentPresenter x:Name="DescriptionPresenter" AutomationProperties.AccessibilityView="Raw" Content="{TemplateBinding Description}" Grid.ColumnSpan="2" Grid.Column="0" Foreground="{ThemeResource SystemControlDescriptionTextForegroundBrush}" Grid.Row="2" x:Load="False" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Page.Resources>
<Grid>
<TextBox Style="{StaticResource TextBoxStyle1}" Height="25"></TextBox>
</Grid>
Please note that I only change the MinHeight for it, if you input in it, you will find that Its text display is incomplete. If you want to make it look better. You need to do more customization.
Please read Tutorial: Create custom styles and Control templates for more information.

This is a regression in Windows 10, version 1806 (build 17763). Previous version - Fall creators update (build 16299) doesn't have this issue.
Removing MinWidth="{ThemeResource TextControlThemeMinWidth}" on a Border element in TextBox style definition as suggested above fixes it.

How to remove arrow from ColorCanvas dropdown control in wpf C#

I am using c# wpf ColorCanvas control for using colors in my application.I want to remove dropdown arrow from ColorCanvas control.
I am using this Xaml Code for ColorCanvas
<xctk:ColorPicker x:Name="canvas_Copy" ColorMode="ColorCanvas" VerticalAlignment="Top" Margin="93,323,409,0" />
For clarity check this image.I want to remove this Arrow form ColorCanvas.

You should use a custom ButtonStyle:
<xctk:ColorPicker x:Name="canvas_Copy" ColorMode="ColorCanvas" VerticalAlignment="Top" Margin="93,323,409,0" >
<xctk:ColorPicker.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</xctk:ColorPicker.Resources>
<xctk:ColorPicker.ButtonStyle>
<Style TargetType="ToggleButton">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleButton" xmlns:chrome="clr-namespace:Xceed.Wpf.Toolkit.Chromes;assembly=Xceed.Wpf.Toolkit">
<Grid SnapsToDevicePixels="True">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Padding="{TemplateBinding Padding}"
SnapsToDevicePixels="True">
<ContentPresenter Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" />
</Border>
<chrome:ButtonChrome x:Name="ToggleButtonChrome"
Grid.Column="1"
CornerRadius="0,2.75,2.75,0"
Visibility="{Binding ShowDropDownButton, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}, Converter={StaticResource BooleanToVisibilityConverter}}"
RenderChecked="{Binding IsOpen, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}}"
RenderEnabled="{Binding IsEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=xctk:ColorPicker}}"
RenderMouseOver="{TemplateBinding IsMouseOver}"
RenderPressed="{TemplateBinding IsPressed}">
</chrome:ButtonChrome>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</xctk:ColorPicker.ButtonStyle>
</xctk:ColorPicker>

Use ColorCanvas control from the same namespace instead of ColorPicker.

finds its css file (or its styling file) and change its color to match its background