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.

Device Background

For most device UIs, you should not set a background brush. The default value is ‘WorkspaceBackgroundLight’ which works well for UIs without a tabbed UI. For tabbed UIs, we set the background to ‘WorkspaceBackground’, which is darker than default (when in dark mode, otherwise it stays white in the Light theme).

Tabbed UI

We use left-aligned tabs styled with the ‘LeftTab’ style:

<TabControl Style="{StaticResource LeftTabControl}">
        <TabItem>
            <TabItem.Header>
                <TextBlock Text="FTP Connection"
                           Style="{StaticResource LeftTabLabel}" />
            </TabItem.Header>
            <ftp:FtpControl Config="{Binding Config.FtpConfiguration, Mode=OneWay}"
                            DeviceUiParams="{Binding DeviceUIParams}"
                            QueryCertificatesProxy="{Binding DeviceProxy, Mode=OneWay}"
                            Margin="10"
                            ShowTestConnectionButton="True"
                            x:Name="FtpControl" />
        </TabItem>
        ...

Headered Content

When working with 2-toned UIs (for example, a header text area which should contrast with a content text area), we use the ‘HighlightBrush’ resource. This resource also works well with overlays.

Vector Primary Device Icons

As mentioned above, you can use a vector-based primary device icon for better clarity at higher dpis. This is done by returning null from the DeviceImage property (which is used for bitmap-based images) and instead overriding the DeviceImageSource property.

...

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()
{
    ...
}