Content Comparison

...

If you have elements within your device UI which require customization based on theme (ie, you wish to specify different colors depending on which theme is selected) then you have two the following options:

1. Add a reference to Connexion.Share.Ui.Style and use one of our existing resources. Attached to this document are the dark.xaml and light.xaml files which define variables used within Connexion. You may dynamically reference one of these.
   

   Image Modified

2. Use code-behind to detect the theme (and when it changes) and use xaml bindings/styles to set the resources. In your viewmodel (or view class) you can use the IThemeProvider interface to hook theme infrastructure.

...

3. Bind to the IsDarkMode property directly in your XAML (Available in 16.1 R3 and newer):

<TextBlock>
  <TextBlock.Style>
    <Style TargetType="TextBlock">
      <Setter Property="Text" Value="LightMode" />
        <Style.Triggers>
          <DataTrigger Binding="{Binding Source={x:Static core:ThemeBinding.GlobalTheme}, Path=IsDarkMode, Mode=OneWay}"
                       Value="true">
            <Setter Property="Text" Value="DarkMode" />
          </DataTrigger>
        </Style.Triggers>
    </Style>
  </TextBlock.Style>
</TextBlock>

Specifically: Binding="{Binding Source={x:Static core:ThemeBinding.GlobalTheme}, Path=IsDarkMode, Mode=OneWay}"

You will need to add a reference to Connexion.Core in your XAML header (xmlns:core="Connexion.Core....)

Connexion Look & Feel

Within Connexion we have a general look and feel with our devices. If you wish to replicate this in your own devices, we recommend the following.

...

The DrawingImageSourceFromResource method takes the path to a xaml-defined vector image file and the key of the image within that file. If you return a value from DeviceImage, it will take precedence over the DeviceImageSource property.

Custom Resource Dictionaries

In 16.1R3 and higher, you can add your own resource dictionaries to the main application styles dictionary. If you’ve created an assembly containing a shared resource dictionary (ie, the styles are defined in a different assembly), you must use a specific overload in your UI constructor.

Typically your UI constructor uses the XamlInitializer.Initialize(this) call. Instead, use the overload with the following signature: XamlInitializer.Initialize(this, IEnumerable<(Type, Func<your_resource_dictionary>));

public MyDeviceUi()
{
  var resourceDictionariesToRegister = new List<(Type, Func<ResourceDictionary>)>
  {
    (typeof(YourResourceDictionary), () => new YourResourceDictionary())
  };
  XamlInitializer.Initialize(this, resourceDictionariesToRegister);
}

public MyDeviceUi(MyDeviceConfiguration config, IDeviceUIParams deviceUIParams) : this()
{
    ...
}