I know this is 13! years later, but, if anyone else is curious, you can use BulletDecorator
(docs). There's special handling for vertical alignment based on the first line of text, if the content is text-based content.
OP's example, written with BulletDecorator
s:
<StackPanel>
<BulletDecorator>
<BulletDecorator.Bullet>
<TextBlock Text="Log Count" Width="100"/>
</BulletDecorator.Bullet>
<TextBlock Text="{Binding LastLogRun.LogMessageCount}"/>
</BulletDecorator>
<BulletDecorator>
<BulletDecorator.Bullet>
<TextBlock Text="Start Time" Width="100"/>
</BulletDecorator.Bullet>
<TextBlock Text="{Binding LastLogRun.StartTime}"/>
</BulletDecorator>
<BulletDecorator>
<BulletDecorator.Bullet>
<TextBlock Text="End Time" Width="100"/>
</BulletDecorator.Bullet>
<TextBlock Text="{Binding LastLogRun.EndTime}"/>
</BulletDecorator>
</StackPanel>
If you're not a fan of that 👆 syntax (it's a bit verbose for my sake), you can use some attached properties to clean it up some.
BulletHelper.cs
public static class BulletHelper
{
#region Bullet
public static readonly DependencyProperty BulletProperty = DependencyProperty.RegisterAttached(
"Bullet",
typeof(object),
typeof(BulletHelper),
new FrameworkPropertyMetadata(OnBulletChanged)
);
public static object? GetBullet(DependencyObject target)
=> target.GetValue(BulletHelper.BulletProperty);
public static void SetBullet(DependencyObject target, object? value)
=> target.SetValue(BulletHelper.BulletProperty, value);
private static void OnBulletChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is BulletDecorator bulletDecorator)
{
bulletDecorator.Bullet = CreateUiElement(e.NewValue);
}
}
#endregion Bullet
#region Child
public static readonly DependencyProperty ChildProperty = DependencyProperty.RegisterAttached(
"Child",
typeof(object),
typeof(BulletHelper),
new FrameworkPropertyMetadata(OnChildChanged)
);
public static object? GetChild(DependencyObject target)
=> target.GetValue(BulletHelper.ChildProperty);
public static void SetChild(DependencyObject target, object? value)
=> target.SetValue(BulletHelper.ChildProperty, value);
private static void OnChildChanged(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is BulletDecorator bulletDecorator)
{
bulletDecorator.Child = CreateUiElement(e.NewValue);
}
}
#endregion Child
[return: NotNullIfNotNull("value")]
private static UIElement? CreateUiElement(this object? value)
{
return value switch
{
null => null,
// Uncomment if using MaterialDesignThemes (https://github.com/MaterialDesignInXAML/MaterialDesignInXamlToolkit)
// PackIconKind kind => new PackIcon { Kind = kind },
// Uncomment if using FontAwesome6.Svg (https://github.com/MartinTopfstedt/FontAwesome6)
// EFontAwesomeIcon.None => null,
// EFontAwesomeIcon fontAwesomeIcon => new SvgAwesome { Icon = fontAwesomeIcon },
UIElement uiElement => uiElement,
_ => new ContentPresenter { Content = value },
};
}
}
The above attached properties reduces it to:
<StackPanel>
<BulletDecorator BulletHelper.Bullet="Log Count"
BulletHelper.Child="{Binding LastLogRun.LogMessageCount}" />
<BulletDecorator BulletHelper.Bullet="Start Time"
BulletHelper.Child="{Binding LastLogRun.StartTime}" />
<BulletDecorator BulletHelper.Bullet="End Time"
BulletHelper.Child="{Binding LastLogRun.EndTime}" />
</StackPanel>
Unfortunately, you lose out on the Width
property that was previously set on the TextBlock
.
I wish BulletDecorator
was easier to work with. Unfortunately, its two main properties, Child
and Bullet
, are not dependency properties, and they both must be UIElement
.
However. You can make a Control
(not a UserControl
!) that makes BulletDecorator
easier to use.
BulletControl.cs
public class BulletControl : ContentControl
{
static BulletControl()
{
FocusableProperty.OverrideMetadata(typeof(Control), new FrameworkPropertyMetadata(false));
DefaultStyleKeyProperty.OverrideMetadata(typeof(BulletControl), new FrameworkPropertyMetadata(typeof(BulletControl)));
}
#region Bullet
public static readonly DependencyProperty BulletProperty = DependencyProperty.Register(
nameof(Bullet),
typeof(object),
typeof(BulletControl),
new FrameworkPropertyMetadata(BulletChangedCallback)
);
public object? Bullet
{
get => this.GetValue(BulletProperty);
set => this.SetValue(BulletProperty, value);
}
private static void BulletChangedCallback(DependencyObject d, DependencyPropertyChangedEventArgs e)
{
if (d is Bullet ctrl)
{
ctrl.SetValue(HasBulletPropertyKey, e.NewValue is not null);
}
}
#endregion Bullet
#region BulletStringFormat
public static readonly DependencyProperty BulletStringFormatProperty = DependencyProperty.Register(
nameof(BulletStringFormat),
typeof(string),
typeof(BulletControl),
new FrameworkPropertyMetadata()
);
public string? BulletStringFormat
{
get => (string?)this.GetValue(BulletStringFormatProperty);
set => this.SetValue(BulletStringFormatProperty, value);
}
#endregion BulletStringFormat
#region BulletTemplate
public static readonly DependencyProperty BulletTemplateProperty = DependencyProperty.Register(
nameof(BulletTemplate),
typeof(DataTemplate),
typeof(BulletControl),
new FrameworkPropertyMetadata()
);
public DataTemplate? BulletTemplate
{
get => (DataTemplate?)this.GetValue(BulletTemplateProperty);
set => this.SetValue(BulletTemplateProperty, value);
}
#endregion BulletTemplate
#region BulletTemplateSelector
public static readonly DependencyProperty BulletTemplateSelectorProperty = DependencyProperty.Register(
nameof(BulletTemplateSelector),
typeof(DataTemplateSelector),
typeof(BulletControl),
new FrameworkPropertyMetadata()
);
public DataTemplateSelector? BulletTemplateSelector
{
get => (DataTemplateSelector?)this.GetValue(BulletTemplateSelectorProperty);
set => this.SetValue(BulletTemplateSelectorProperty, value);
}
#endregion BulletTemplateSelector
#region HasBullet
private static readonly DependencyPropertyKey HasBulletPropertyKey = DependencyProperty.RegisterReadOnly(
name: nameof(HasBullet),
propertyType: typeof(bool),
ownerType: typeof(BulletControl),
typeMetadata: new FrameworkPropertyMetadata()
);
public bool HasBullet
{
get => (bool)this.GetValue(HasBulletPropertyKey.DependencyProperty);
private set => this.SetValue(HasBulletPropertyKey, value);
}
#endregion HasBullet
}
Generic.xaml
<Style TargetType="{x:Type controls:BulletControl}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type controls:BulletControl}">
<BulletDecorator>
<BulletDecorator.Bullet>
<ContentPresenter ContentSource="Bullet" />
</BulletDecorator.Bullet>
<ContentPresenter ContentSource="Content" />
</BulletDecorator>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
With 👆, the OP's sample code becomes:
<StackPanel>
<StackPanel.Resources>
<DataTemplate x:Key="BulletTemplate">
<TextBlock Text="{Binding}"
Width="100" />
</DataTemplate>
</StackPanel.Resources>
<BulletControl Bullet="Log Count"
Content="{Binding LastLogRun.LogMessageCount}"
BulletTemplate="{StaticResource BulletTemplate}"
/>
<BulletControl Bullet="Start Time"
Content="{Binding LastLogRun.StartTime}"
BulletTemplate="{StaticResource BulletTemplate}"
/>
<BulletControl Bullet="End Time"
Content="{Binding LastLogRun.EndTime}"
BulletTemplate="{StaticResource BulletTemplate}"
/>
</StackPanel>