C#•2mo ago

How to use a templated control in main window view?

<!-- MainWindow.axaml -->
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:LoudnessMeter.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:controls="clr-namespace:LoudnessMeter.Views.TemplatedControls;assembly=LoudnessMeter"
        mc:Ignorable="d" d:DesignWidth="1048" d:DesignHeight="630"
        Width="1048" Height="630"
        x:Class="LoudnessMeter.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Title="Loudness Meter">

    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <Grid>
      <Grid>
        <StackPanel>
          <controls:LargeLabelControl />
        </StackPanel>
      </Grid>
    </Grid>

</Window>

<!-- ./Views/TemplatedControls/LargeLabelControl.axaml -->
<ResourceDictionary xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:LoudnessMeter.Views.TemplatedControls">
  
  <Design.PreviewWith>
    <StackPanel>      
        <StackPanel Background="{DynamicResource SystemRegionBrush}">
          <controls:LargeLabelControl />
        </StackPanel>
    </StackPanel>
  </Design.PreviewWith>
 
  <ControlTheme x:Key="{x:Type controls:LargeLabelControl}" TargetType="controls:LargeLabelControl">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="{DynamicResource MidBlueBrush}" />
      
    <Setter Property="Template">
      <ControlTemplate>
          <Border Padding="15, 7" Background="{DynamicResource MidBlueBrush}">
              <StackPanel>
                  <Label HorizontalAlignment="Center" Padding="0" FontSize="21" Content="-31.3 LUFS" />
                  <Label HorizontalAlignment="Center" Padding="0" FontSize="11" Content="SHORT TERM" />
              </StackPanel>
          </Border>
      </ControlTemplate>
    </Setter>
  </ControlTheme>
</ResourceDictionary>

<!-- MainWindow.axaml -->
<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:vm="using:LoudnessMeter.ViewModels"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:controls="clr-namespace:LoudnessMeter.Views.TemplatedControls;assembly=LoudnessMeter"
        mc:Ignorable="d" d:DesignWidth="1048" d:DesignHeight="630"
        Width="1048" Height="630"
        x:Class="LoudnessMeter.Views.MainWindow"
        x:DataType="vm:MainWindowViewModel"
        Title="Loudness Meter">

    <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <Grid>
      <Grid>
        <StackPanel>
          <controls:LargeLabelControl />
        </StackPanel>
      </Grid>
    </Grid>

</Window>

<!-- ./Views/TemplatedControls/LargeLabelControl.axaml -->
<ResourceDictionary xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:controls="using:LoudnessMeter.Views.TemplatedControls">
  
  <Design.PreviewWith>
    <StackPanel>      
        <StackPanel Background="{DynamicResource SystemRegionBrush}">
          <controls:LargeLabelControl />
        </StackPanel>
    </StackPanel>
  </Design.PreviewWith>
 
  <ControlTheme x:Key="{x:Type controls:LargeLabelControl}" TargetType="controls:LargeLabelControl">
    <Setter Property="Foreground" Value="White" />
    <Setter Property="Background" Value="{DynamicResource MidBlueBrush}" />
      
    <Setter Property="Template">
      <ControlTemplate>
          <Border Padding="15, 7" Background="{DynamicResource MidBlueBrush}">
              <StackPanel>
                  <Label HorizontalAlignment="Center" Padding="0" FontSize="21" Content="-31.3 LUFS" />
                  <Label HorizontalAlignment="Center" Padding="0" FontSize="11" Content="SHORT TERM" />
              </StackPanel>
          </Border>
      </ControlTemplate>
    </Setter>
  </ControlTheme>
</ResourceDictionary>

The project will build and run, but will not display the templated control on the designer or when the application is ran. Do I have something wrong? I've been following AngelSix's Avalonia Tutorial to start back at the basics and relearn what I didn't take the time to learn before, and we're at the part of using TemplatedControls and I can't get mine to show up. Thanks in advance!

2 Replies

Mekasu0124•2mo ago

- xmlns:controls="clr-namespace:LoudnessMeter.Views.TemplatedControls;assembly=LoudnessMeter"
+ xmlns:controls="using:LoudnessMeter.Views.TemplatedControls"

- xmlns:controls="clr-namespace:LoudnessMeter.Views.TemplatedControls;assembly=LoudnessMeter"
+ xmlns:controls="using:LoudnessMeter.Views.TemplatedControls"

this doesn't work either

- xmlns:controls="using:LoudnessMeter.Views.TemplatedControls"
+ xmlns:controls="clr-namespace:LoudnessMeter.Views.TemplatedControls"

- xmlns:controls="using:LoudnessMeter.Views.TemplatedControls"
+ xmlns:controls="clr-namespace:LoudnessMeter.Views.TemplatedControls"

removed the ;assembly=LoudnessMeter part and that didn't work either

Brian Kiarie Mwaniki•2mo ago

Hi @Mekasu0124, when using a templated control that is defined as a ResourceDictionary you need to include the resource itself in the main window view, like so:


<Window>
     <Window.Resources>
        <ResourceDictionary>
          <ResourceDictionary.MergedDictionaries>
             <ResourceInclude Source="avares://LoudnessMeter.Views.TemplatedControls/LargeLabelControl.axaml"/>
           </ResourceDictionary.MergedDictionaries>
        </ResourceDictionary>
     </Window.Resources>


     <Design.DataContext>
        <vm:MainWindowViewModel/>
    </Design.DataContext>

    <Grid>
      <Grid>
        <StackPanel>
          <controls:LargeLabelControl />
        </StackPanel>
      </Grid>
    </Grid>
</Window>

I hope this helps

Gaming

Programming

How to use a templated control in main window view?