Develop Reference

Extend LayoutAnchorable to have use its own style

I am using AvalonDock in my application to have a Visual Studio look and feel. I would like to add some buttons and other controls to the header of the LayoutAnchorableControl as well as add some menu items to the drop down. I only want this to affect certain controls and not the entire layout.
I've been able to add buttons and controls to specific LayoutAnchorableControls by adding methods to the LayoutAnchorable that check for certain criteria and adding the controls to the theme. However, I feel there is a more robust solution I have yet to stumble on.

If you are using MVVM approach, you don't need to add methods to LayoutAnchorableControls. You can get it simply editing AvalonDock style.
For example, you may edit the LayoutDocumentTabItem style like the following:
<Style TargetType="{x:Type avalonDockControls:LayoutDocumentTabItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type avalonDockControls:LayoutDocumentTabItem}">
<Border Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<!-- Following border is required to catch mouse events -->
<Border Grid.ColumnSpan="5" Background="Transparent" />
<TextBlock Grid.Column="0" Visibility="{Binding LayoutItem.Model.IsStatusQuadStringVisible,
RelativeSource={RelativeSource TemplatedParent}, Converter={StaticResource BoolToVisibilityConverter}}"
Text="{Binding LayoutItem.Model.StatusQuadString,
RelativeSource={RelativeSource TemplatedParent}}" FontSize="{StaticResource SrkMainTouchControlFontSize}" HorizontalAlignment="Left" VerticalAlignment="Center" TextTrimming="CharacterEllipsis"/>
<ContentPresenter HorizontalAlignment="Center"
Grid.Column="2"
VerticalAlignment="Center"
Content="{Binding Model,
RelativeSource={RelativeSource TemplatedParent}}"
ContentTemplate="{Binding DocumentHeaderTemplate,
Mode=OneWay,
RelativeSource={RelativeSource AncestorType={x:Type avalonDock:DockingManager},
Mode=FindAncestor}}"
ContentTemplateSelector="{Binding DocumentHeaderTemplateSelector,
Mode=OneWay,
RelativeSource={RelativeSource AncestorType={x:Type avalonDock:DockingManager},
Mode=FindAncestor}}" />
<!-- region TabItem Buttons -->
<StackPanel Grid.Column="4" Orientation="Horizontal"
HorizontalAlignment="Right"
VerticalAlignment="Center">
<Button Margin="2,0"
Command="{Binding LayoutItem.Model.MyCustomCommand, RelativeSource={RelativeSource TemplatedParent}}"
Style="{StaticResource ButtonAvalonDocumentStyleKey}">
<Button.ToolTip>
<PriorityBinding>
<Binding Path="LayoutItem.Model.MyCustomCommand" RelativeSource="{RelativeSource TemplatedParent}" IsAsync="True"/>
</PriorityBinding>
</Button.ToolTip>
<Path Data="{StaticResource SrkGeometryMyCustomCommand}" Stretch="Uniform" Margin="5,0" Style="{StaticResource PathAvalonDocumentStyleWithStrokeKey}" />
</Button>
</StackPanel>
<!-- endregion TabItem Buttons -->
</Grid>
</Border>
</Setter.Value>
</Setter>
</Style>
By doing this, you are adding a new custom Button to the tabbed Doc's title, binded to an ICommand named MyCustomCommand.
Furthermore, you may adding DataTrigger to the style binded to a Visibility property on the ViewModel that can handle button visibility, based on the business logic of your application.
I hope it helps.

Absolute positioning of a panel defined in a content control

I am trying to write a custom control in Windows UWP by inheriting from a Control class (A button with custom action). On clicking of this button I want to show a panel at the bottom of the page irrespective of where the control is being used in the page (Kind of a popup but I need the freedom in defining the position of the panel on the screen).
Can anyone help how i can get this done in XAML. Below is the template I am using for my custom control.
<ResourceDictionary
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UI.Controls"
xmlns:converters="using:UI.ValueConverters">
<Style TargetType="local:Plugin">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="local:Plugin">
<Grid>
<Grid.Resources>
<converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
<x:Double x:Key="EllipseDimension">30</x:Double>
</Grid.Resources>
<Button Name="PluginButton"
Width="{TemplateBinding PluginWidth}"
Height="{TemplateBinding PluginHeight}"
Command="{Binding PluginTrigger}"
Padding="0"
VerticalAlignment="Top"
AutomationProperties.Name="Main button"
Background="Transparent"
BorderThickness="0"
TabIndex="0">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="48" />
</Grid.ColumnDefinitions>
<SymbolIcon Symbol="{TemplateBinding Symbol}"
Visibility="{Binding Image, Converter={StaticResource NullToVisibilityConverter}, ConverterParameter=true}"
Foreground="Black"
VerticalAlignment="Center"
HorizontalAlignment="Center"
ToolTipService.ToolTip="{TemplateBinding Label}" />
<Ellipse Visibility="{Binding Image, Converter={StaticResource NullToVisibilityConverter}}"
Width="{StaticResource EllipseDimension}"
Height="{StaticResource EllipseDimension}">
<Ellipse.Fill>
<ImageBrush ImageSource="{Binding Image}" />
</Ellipse.Fill>
</Ellipse>
</Grid>
</Button>
<StackPanel Name="popuptoshow"></StackPanel>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>

Show Border on avalonEdit:TextEditor

I am trying to get a border to show around an avalonEdit 'box' in a Wpf control but can't seem to make it happen.
I added BorderBrush="Black" BorderThickness="2" but clearly I am missing something.
I've googled but, despite my endeavors, I cannot find anything - I suspect I may not know the correct terminology to Google for because it feels like it should be straightforward!
Code as follows:
<Label Content="Account:" HorizontalAlignment="Left" Margin="10,28,0,0" VerticalAlignment="Top"/>
<TextBox Name ="textBoxAccount" HorizontalAlignment="Left" Height="23" Margin="66,28,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="120"/>
<Label Content="Query:" HorizontalAlignment="Left" Margin="10,59,0,0" VerticalAlignment="Top"/>
<Button x:Name="btnGo" Content="Go!" HorizontalAlignment="Left" Height="25" Margin="10,342,0,0" VerticalAlignment="Top" Width="146"/>
<avalonEdit:TextEditor
xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit"
x:Name="textEditor"
FontFamily="Consolas"
SyntaxHighlighting="AWQL"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
WordWrap="True"
Visibility="Visible"
BorderBrush="Black" BorderThickness="2"
FontSize="10pt" Margin="12,89.96,10,0" Height="229" VerticalAlignment="Top"/>
</Grid>
which renders like this:
but the 'avalonEdit' box doesn't seem to render the border so looks invisible unless/until a user clicks inside it and starts typing.
I'd really like the border to look the same as the simple textbox at the top of the user control but right now I'd settle for anything visible!

I only worked once with avalon before so I cooked up a quick project which does what you want.
As a disclaimer, AvalonEdit seems to ruin any attempt to put a border around it like you said. So I set it up using a grid to put a border around it.
It will look something like this:
And the code will look like this:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Width="600" Height="500"
xmlns:avalonEdit="http://icsharpcode.net/sharpdevelop/avalonedit">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Content="Account:" HorizontalAlignment="Left" Margin="20,20" VerticalAlignment="Top" Height="26" Width="56" />
<TextBox Grid.Column="1" Grid.Row="0" Name="textBoxAccount" HorizontalAlignment="Left" Height="26" Margin="20" TextWrapping="Wrap"
VerticalAlignment="Top" Width="120" />
<Label Grid.Column="0" Grid.Row="1" Content="Query:" HorizontalAlignment="Left" Margin="20,0" VerticalAlignment="Top" Height="26" Width="45" />
<Border Grid.ColumnSpan="2"
Grid.Row="2"
Grid.Column="0" BorderBrush="Black" BorderThickness="1"
Margin="20"
Height="230">
<avalonEdit:TextEditor
x:Name="textEditor"
FontFamily="Consolas"
SyntaxHighlighting="AWQL"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
WordWrap="True"
Visibility="Visible"
FontSize="10pt" VerticalAlignment="Top" Height="226"/>
</Border>
<Button Grid.Column="0" Grid.Row="3" x:Name="btnGo" Content="Go!" HorizontalAlignment="Left" Height="25" Margin="20"
VerticalAlignment="Top" Width="146" />
</Grid>
This is not exactly what you want, but a grid will help with other issues as well in the long run

This is the avalonEdit:TextEditor style (TextEditor.xaml):
<Style TargetType="{x:Type AvalonEdit:TextEditor}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.WindowTextBrushKey}}" />
<Setter Property="Background" Value="{DynamicResource {x:Static SystemColors.WindowBrushKey}}" />
<Setter Property="FlowDirection" Value="LeftToRight"/> <!-- AvalonEdit does not support RTL, so ensure we use LTR by default -->
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type AvalonEdit:TextEditor}">
<ScrollViewer
Focusable="False"
Name="PART_ScrollViewer"
CanContentScroll="True"
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextArea}"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left"
Background="{TemplateBinding Background}"
Padding="{TemplateBinding Padding}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
/>
<ControlTemplate.Triggers>
<Trigger Property="WordWrap"
Value="True">
<Setter TargetName="PART_ScrollViewer"
Property="HorizontalScrollBarVisibility"
Value="Disabled" />
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
And this is an explanation about why ScrollViewer doesn't show borders: https://social.msdn.microsoft.com/Forums/vstudio/en-US/a2310302-167b-44e2-bc23-825ff1610701/scrollviewer-border
So, I think the best way is to wrap the TextEditor inside a Border as Guerudo says or modify the template in Avalon code TextEditor.xaml.

I didn't work with avalonEdit but I can suggest you an other way : you could wrap your TextEditor inside a <Border> </Border>.
It's probably not the best solution but it is one.

The AvalonEdit community nicely fixed this problem by changing the TextEditor style from the project:
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type AvalonEdit:TextEditor}">
<Border
Background="{TemplateBinding Background}"
BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ScrollViewer
Focusable="False"
Name="PART_ScrollViewer"
CanContentScroll="True"
VerticalScrollBarVisibility="{TemplateBinding VerticalScrollBarVisibility}"
HorizontalScrollBarVisibility="{TemplateBinding HorizontalScrollBarVisibility}"
Content="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=TextArea}"
VerticalContentAlignment="Top"
HorizontalContentAlignment="Left"
Padding="{TemplateBinding Padding}"
/>
</Border>

Default behavior of a textbox

I've got a custom control that is a textbox and two buttons inside a frame.
I'd like the frame to display the typical textbox border-behaviour. Currently, it just has a black border. Is there a short way or will I need 200 lines of XAML?
(I've found some examples e.g. the ComboBoxStyles-Example from MS, but .. these do use 200 lines of XAML).
This is the style for the IntegerSpinControl:
<Style TargetType="{x:Type cc:IntegerSpinControl}">
<Setter Property="HorizontalAlignment" Value="Center" />
<Setter Property="VerticalAlignment" Value="Center" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type cc:IntegerSpinControl}">
<Border BorderThickness="1" BorderBrush="Black">
<DockPanel LastChildFill="True" HorizontalAlignment="Stretch">
<Grid DockPanel.Dock="Right" x:Name="grid1"
Grid.Column="1"
HorizontalAlignment="Center"
VerticalAlignment="Center">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<RepeatButton Grid.Row="0"
Grid.Column="1"
Width="22"
Height="10"
Padding="0"
BorderThickness="0"
Command="{x:Static cc:IntegerSpinControl.IncreaseCommand}">
<RepeatButton.Content>
<Rectangle Width="16"
Height="5"
Fill="{StaticResource brush.scroll.up}" />
</RepeatButton.Content>
</RepeatButton>
<RepeatButton Grid.Row="1"
Grid.Column="1"
Width="22"
Height="10"
Padding="0"
BorderThickness="0"
Command="{x:Static cc:IntegerSpinControl.DecreaseCommand}">
<RepeatButton.Content>
<Rectangle Width="16"
Height="5"
Fill="{StaticResource brush.scroll.down}" />
</RepeatButton.Content>
</RepeatButton>
</Grid>
<TextBox DockPanel.Dock="Left"
BorderThickness="0"
HorizontalAlignment="Stretch"
Grid.Row="0"
Grid.Column="0"
Width="Auto"
Margin="0,0,1,0"
VerticalAlignment="Center"
IsReadOnly="True"
Text="{Binding RelativeSource={RelativeSource TemplatedParent},
Path=FormattedValue,
Mode=OneWay}" />
</DockPanel>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

There is already a control in the Extended WPF Toolkit that might be what you are looking for:
IntegerUpDown Control
Maybe you can use that instead?
BTW: There are also a Decimal and a Double version in the toolkit.
That being said, if you have to use your own Custom Control you will have to create the Templates and Styles yourself, however you can probably copy heavily from the Windows defaults.

How to make a custom tool tip template in WPF XAML

I have a number of buttons on a form (devcomponents ButtonDropDown controls to be precise).
I want to show a tool tip for each that contains a header at the top, an image on the left and a description on the right.
The header needs to be tied to the ButtonDropDown.Header, the image to the ButtonDropDown.Image. I also then need to define the description somewhere.
I've only been using WPF for a few weeks so I've not managed to find any answers via searching, though I have studied a few.
Below is my attempt at creating a template that really doesn't work at all:
<Style TargetType="dcr:ButtonDropDown">
<Setter Property="OverridesDefaultStyle" Value="True"></Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="dcr:ButtonDropDown">
<ContentControl>
<ContentControl.ToolTip>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Content="{TemplateBinding Header}" FontWeight="Bold" />
<Viewbox Grid.Row="1" Grid.Column="0" Width="64" Height="32" Margin="3">
<ContentControl Content="{TemplateBinding Image}" />
</Viewbox>
<Label Grid.Row="1" Grid.Column="1"
Content="{TemplateBinding ToolTip.Content}" />
</Grid>
</ContentControl.ToolTip>
</ContentControl>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I then define a button as follows:
<dcr:ButtonDropDown Header="-X" Command="{Binding MoveCommand}" CommandParameter="xMinus"
ImagePosition="Top" IsEnabled="{Binding UserConfiguration.Move.Visible}"
ToolTip="move x axis down">
<dcr:ButtonDropDown.Image>
<Viewbox Width="32" Height="32" Margin="3">
<ContentControl Content="{StaticResource minusXImage}" />
</Viewbox>
</dcr:ButtonDropDown.Image>
</dcr:ButtonDropDown>
Please could someone give me an idea how to go about this?

I've gone some way to answering this question.
The following style is defined for ToolTip:
<Style TargetType="ToolTip">
<Setter Property="OverridesDefaultStyle" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToolTip">
<Border Background="GhostWhite" BorderBrush="Gainsboro" BorderThickness="1">
<Grid Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2"
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Header)}"
FontWeight="Bold" />
<Viewbox Grid.Row="1" Grid.Column="0" Width="64" Height="32" Margin="3">
<ContentControl Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Image)}" />
</Viewbox>
<Label Grid.Row="1" Grid.Column="1"
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.ToolTip)}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I then define a button as above and the ToolTip text and header appear in the ToolTipas required.
The key is the binding:
Content="{Binding RelativeSource={RelativeSource Mode=FindAncestor, AncestorType={x:Type ToolTip}},
Path=PlacementTarget.(dcr:ButtonDropDown.Header)}"
Which finds the Tooltip as an ancestor of Label and casts its PlacementTarget into a ButtonDropDown
What doesn't work is the image. This appears in the ToolTip but is removed from the button.
This will also break any other controls' tooltips if they are not ButtonDropDown controls.
I'm beginning to think I'll need to create some custom controls that contain the information I require for the ToolTip for each control.