Content Comparison

...

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.

...

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.