How to disable UI debugging tools for Xaml in Microsoft Visual Studio

This trips me up because I don’t do it regularly enough to remember it; how to disable the XAML debugging tools widget in UWP apps:

UWP UI Thing

Kind of ironic given what my next post will be.  How to disable:

  1. From main menu: Tools > Options
  2. In Dialog navigation (left pane): Debugging > General
  3. In content pane (right hand side):
    1. Scroll to the bottom
    2. Untick “Enable UI Debugging Tools for XAML”

Thanks, Senthil Kumar B: http://developerpublish.com/disable-ui-debugging-tools-for-xaml-in-visual-studio-2015/

 

Application Version Info Panel

Here’s how to build a simple panel that shows the user the version info of your UWP application.

First the XAML / UI:

<Border x:Name="pnlInstallLocation" Padding="10" CornerRadius="5" Background="#FFB9D2F6" Margin="0,5,15,0" RelativePanel.AlignLeftWithPanel="True" RelativePanel.AlignRightWithPanel="True">
  <RelativePanel>
    <TextBlock x:Name="lbllocation">Install Details</TextBlock>
    <TextBlock x:Name="txtBuildDetails" Text="[build details]" RelativePanel.Below="lbllocation" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True" FontSize="12" Padding="2" MinHeight="12" Margin="10,0,0,0" />
    <TextBox x:Name="txtVersion" Text="[version]" RelativePanel.Below="txtBuildDetails" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True" FontSize="12" Padding="2" IsReadOnly="True" BorderThickness="0" Background="Transparent" MinHeight="12" Margin="10,0,0,0" />
    <TextBox x:Name="txtLocation_App" Text="[location]" RelativePanel.Below="txtVersion" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True" FontSize="12" Padding="2" IsReadOnly="True" BorderThickness="0" Background="Transparent" Height="20" MinHeight="12" Margin="10,0,0,0" />
    <TextBox x:Name="txtLocation_DB" Text="[location]" RelativePanel.Below="txtLocation_App" RelativePanel.AlignRightWithPanel="True" RelativePanel.AlignLeftWithPanel="True" FontSize="12" Padding="2" IsReadOnly="True" BorderThickness="0" Background="Transparent" Height="20" MinHeight="12" Margin="10,0,0,0" />
  </RelativePanel>
</Border>

The code behind:

using Windows.ApplicationModel;

private void Page_Loaded(object sender, RoutedEventArgs e)
{
  Package package = Package.Current;
  PackageId packageId = package.Id;
  PackageVersion version = packageId.Version;

  txtBuildDetails.Text = string.Format("{3} ({4}){0}Package {2}{0}Installed {1}", 
    Environment.NewLine,
    package.InstalledDate, package.Id.Name,
    package.DisplayName, package.Id.Architecture);

  txtVersion.Text = string.Format("Version {0}.{1}.{2}.{3}", version.Major, version.Minor, version.Build, version.Revision);

  txtLocation_App.Text = string.Format("Application folder {0}", package.InstalledLocation.Path);
  txtLocation_DB.Text = string.Format("Database folder {0}", ApplicationData.Current.LocalFolder.Path);


  #if DEBUG
  txtVersion.Foreground = new SolidColorBrush(Windows.UI.Colors.DarkRed);
  #endif
}

 

This code has been lifted from a working app, I haven’t done a detailed checking of the code for this post, but everything needed should be present – uses Windows 10 Anniversary Edition (10.0; Build 14393).

Using Symbols in UWP UI Controls

To use a symbol character from a font like Segoe MDL2 Assets or Segoe UI Symbol as the visible content / text of a UWP control in XAML, use the following code, where 1234 is the correct symbol code.

E.g.:

Content="&#xE15E;"

To set in C# use:

lblMySymbol.Content="\u1234;"

Also see:

  1. https://docs.microsoft.com/en-us/windows/uwp/design/style/segoe-ui-symbol-font
  2. https://www.google.co.nz/search?q=segoe+mdl2+assets+cheatsheet
  3. http://www.kreativekorp.com/charset/font.php?font=Segoe+UI+Symbol

About These Code Posts

I no longer code to earn a living, I code for pleasure.  The code snippets posted here are mainly for my own reference – and to benefit anyone who can use them.