jeroenvdv
Topic Author
Posts: 13
Joined: 15 Sep 2014, 20:21

Font size differs between Unity Editor & Stand-alone

10 May 2015, 09:29

[Version 1.2.3 for Unity]
Hi all,

It seems I see different font sizes in Blend + Unity Editor, compared to stand-alone (windowed). In the attachment, the header & footer are regular labels, just sitting in a grid. The grey "devices" in between are within viewboxes, so their font is scaled.

As you can see the standalone shows much smaller fontsize for those regular labels at top and bottom than in the Unity Editor. Blend shows the same as the Editor...

Regards,

Jeroen
Attachments
Screen Shot 2015-05-10 at 09.26.50.png
 
User avatar
sfernandez
Site Admin
Posts: 1911
Joined: 22 Dec 2011, 19:20

Re: Font size differs between Unity Editor & Stand-alone

11 May 2015, 14:02

Are you using a Viewbox or anything similar wrapping all these Labels on the top and bottom that will resize the text? Because in the bottom bar, there is a circle that it is also scaled down.

Could you please attach the XAML code so I can try to reproduce the problem?
 
jeroenvdv
Topic Author
Posts: 13
Joined: 15 Sep 2014, 20:21

Re: Font size differs between Unity Editor & Stand-alone

11 May 2015, 20:01

Thanks for your reply. I only use a viewbox for the grey devices in the middle, header and footer are just labels. The circle you see is a small part of a scrollbar..

Below is the XAML (quite a large one, sorry for the "mess"...).

Regards,

Jeroen

<Grid xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Name="mainWindow" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" TextElement.FontFamily="#Myriad Pro" HorizontalAlignment="Left" Margin="0">
	<Grid.Resources>

		<ResourceDictionary>
			<ResourceDictionary.MergedDictionaries>
				<ResourceDictionary Source="ScrollbarStyle.xaml"/>
			</ResourceDictionary.MergedDictionaries>
			<Style TargetType="{x:Type Button}">
				<Setter Property="Background" Value="{DynamicResource LED_off}"/>
				<Setter Property="BorderThickness" Value="0"/>
				<Style.Triggers>
					<Trigger Property="IsMouseOver" Value="True">
						<Setter Property="Foreground" Value="#FFFFFFFF"/>
					</Trigger>
				</Style.Triggers>
			</Style>
			<Style TargetType="{x:Type Button}" x:Key="PlayerTransportButton">
				<Setter Property="Background" Value="{DynamicResource LED_off}"/>
				<Setter Property="FontSize" Value="13.333" />
				<Setter Property="BorderBrush" Value="#ff666666"/>
				<Setter Property="Foreground" Value="#50FFFFFF"/>
				<Setter Property="Template">
					<Setter.Value>
						<ControlTemplate TargetType="{x:Type Button}">
							<Grid>
								<Rectangle Fill="{TemplateBinding Background}" />
								<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="2">
									<ContentPresenter Content="{TemplateBinding Content}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
								</Border>
							</Grid>
						</ControlTemplate>
					</Setter.Value>
				</Setter>
				<Style.Triggers>
					<Trigger Property="IsMouseOver" Value="True">
						<Setter Property="Foreground" Value="#FFFFFFFF"/>
					</Trigger>
				</Style.Triggers>
			</Style>



			<SolidColorBrush x:Key="Black" Color="Black"/>
			<SolidColorBrush x:Key="Amber" Color="#FFFFD100"/>
			<SolidColorBrush x:Key="White" Color="White"/>
			<SolidColorBrush x:Key="Grey" Color="#FF646464"/>
			<SolidColorBrush x:Key="White50%" Color="#7FFFFFFF"/>
			<SolidColorBrush x:Key="White75%" Color="#C0FFFFFF"/>
			<SolidColorBrush x:Key="Black50%" Color="#7F000000"/>
			<RadialGradientBrush x:Key="AmberLED" >
				<GradientStop Color="#FFFFC500" Offset="1"/>
				<GradientStop Color="#FFFBEFC8"/>
			</RadialGradientBrush>
			<RadialGradientBrush x:Key="LED_off" >
				<GradientStop Color="#FF292929" Offset="1"/>
				<GradientStop Color="#FF3C3C3C" Offset="0"/>
			</RadialGradientBrush>
			<SolidColorBrush x:Key="White25%" Color="#3FFFFFFF"/>
			<LinearGradientBrush x:Key="backgroundGradient" EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="#FF484848" Offset="0.439"/>
				<GradientStop Offset="1" Color="#FF1C1C1C"/>
				<GradientStop Color="#FF262626" Offset="0.039"/>
				<GradientStop Color="#FF080808"/>
				<GradientStop Color="#FF404040" Offset="0.683"/>
			</LinearGradientBrush>

			<ItemsPanelTemplate x:Key="devicesDataTemplate">
				<StackPanel  VerticalAlignment="Top" IsItemsHost="True"/>
			</ItemsPanelTemplate>

			<ItemsPanelTemplate x:Key="logDataTemplate">
				<StackPanel Orientation="Vertical" VerticalAlignment="Top" IsItemsHost="True"/>
			</ItemsPanelTemplate>

			<LinearGradientBrush x:Key="Inset" EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="Black" Offset="0.896"/>
				<GradientStop Color="#FF565656" Offset="1"/>
				<GradientStop Color="Black" Offset="0.117"/>
				<GradientStop Color="#FF4F4F4F"/>
			</LinearGradientBrush>
			<LinearGradientBrush x:Key="BorderGreyGlow" EndPoint="0.5,1" StartPoint="0.5,0">
				<GradientStop Color="#FF2F2F2F"/>
				<GradientStop Color="#FF7E7E7E" Offset="0.539"/>
				<GradientStop Color="#FF343434" Offset="1"/>
			</LinearGradientBrush>
			<DataTemplate x:Key="devicesItemTemplate">
				<Viewbox>
					<Border BorderThickness="1" TextElement.FontFamily="#Myriad Pro" BorderBrush="{DynamicResource BorderGreyGlow}">
						<Border.Background>
							<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
								<GradientStop Color="#FF1E1E1E" Offset="0"/>
								<GradientStop Color="#FF373737" Offset="0.414"/>
								<GradientStop Color="Black" Offset="1"/>
							</LinearGradientBrush>
						</Border.Background>
						<Grid Background="{DynamicResource backgroundGradient}" Height="Auto" MinWidth="800" MinHeight="150" Margin="15,0">
							<Grid.ColumnDefinitions>
								<ColumnDefinition Width="Auto"/>
								<ColumnDefinition Width="*" />
							</Grid.ColumnDefinitions>
							<StackPanel x:Name="title" Height="Auto" Width="Auto" Orientation="Horizontal" Margin="10,0,0,0">
								<Viewbox Width="300">
									<TextBlock Text="{Binding name}" x:Name="NAME" Foreground="#FFBDBDBD" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0" FontSize="21.333" FontWeight="Bold" Width="380" />
								</Viewbox>
							</StackPanel>
							<Border x:Name="insetHeader" BorderThickness="2,1" Height="Auto" Width="Auto" Background="{DynamicResource Black}" VerticalAlignment="Stretch" Margin="10" BorderBrush="{DynamicResource Grey}" Grid.Column="1">
								<StackPanel x:Name="dataPanel" Height="Auto" Margin="10">
									<StackPanel x:Name="atemInfo" Height="Auto" Width="Auto" Orientation="Horizontal" Margin="0" VerticalAlignment="Center" HorizontalAlignment="Left">
										<Label x:Name="lblID" Content="ID: " Foreground="{DynamicResource White50%}" FontWeight="Bold" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0" FontSize="13.333"/>
										<TextBlock Text="{Binding id, FallbackValue=-}" x:Name="ID1" Foreground="White" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0,0,10,0" FontSize="13.333" FontWeight="Normal" />
										<Label x:Name="lbl_IP" Content="IP Address: " Foreground="{DynamicResource White50%}" FontWeight="Bold" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0" FontSize="13.333"/>
										<TextBlock Text="{Binding ipaddress, FallbackValue=---.---.---.---}" x:Name="IP" Foreground="{DynamicResource White}" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0" FontSize="13.333" />
										<Label x:Name="lblVideoMode" Content="Video Mode: " Foreground="{DynamicResource White50%}" FontWeight="Bold" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="10,0,0,0" FontSize="13.333"/>
										<TextBlock Text="{Binding videoMode, FallbackValue=-}" x:Name="NAME_Copy" Foreground="{DynamicResource White}" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0" FontSize="13.333" />
									</StackPanel>
									<StackPanel x:Name="settings" Height="Auto" Width="Auto" Orientation="Horizontal" Margin="0,10,0,0" VerticalAlignment="Center" HorizontalAlignment="Left">
										<Label x:Name="lblUniverse" Content="Universe: " Foreground="{DynamicResource White50%}" FontWeight="Bold" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0" FontSize="13.333"/>
										<TextBlock Text="{Binding universe, FallbackValue=-}" x:Name="ID2" Foreground="{DynamicResource White}" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0" FontSize="13.333" />
										<Label x:Name="lblAddress" Content="Address: " Foreground="{DynamicResource White50%}" FontWeight="Bold" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="10,0,0,0" FontSize="13.333"/>
										<TextBlock Text="{Binding address, FallbackValue=-}" x:Name="IP1" Foreground="{DynamicResource White}" HorizontalAlignment="Left" Height="Auto" VerticalAlignment="Center" Margin="0" FontSize="13.333" />
									</StackPanel>
								</StackPanel>
							</Border>
						</Grid>
					</Border>
				</Viewbox>
			</DataTemplate>

			<DataTemplate x:Key="logItemTemplate">
				<Viewbox Margin="0,0,0,0">
					<Grid Width="800" Margin="0,0,0,0" ScrollViewer.VerticalScrollBarVisibility="Disabled">
						<Grid.ColumnDefinitions>
							<ColumnDefinition Width="Auto"/>
							<ColumnDefinition  />
						</Grid.ColumnDefinitions>
						<TextBox Text="{Binding timestamp, FallbackValue=00:00:00}" Foreground="{DynamicResource White}" FontSize="12" FontWeight="Bold" Margin="0,0,10,0" Background="{x:Null}" BorderBrush="{x:Null}" SelectionBrush="{x:Null}" IsEnabled="False" HorizontalAlignment="Left" VerticalAlignment="Top" TextWrapping="Wrap" VerticalScrollBarVisibility="Disabled" Padding="0,-3,0,0"/>
						<TextBox Text="{Binding message, FallbackValue=Long log message to see multi-line text being wrapped around}" Foreground="{DynamicResource White}" FontSize="12" IsEnabled="False" HorizontalAlignment="Left" TextWrapping="Wrap" SelectionBrush="{x:Null}" Background="{x:Null}" BorderBrush="{x:Null}" VerticalAlignment="Top" AcceptsReturn="True" Margin="0" Grid.Column="1" Width="Auto" VerticalScrollBarVisibility="Disabled" Padding="0,-3,0,0" />
					</Grid>
				</Viewbox>
			</DataTemplate>
			<Storyboard x:Key="logViewShow">
				<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="logViewPanel" From="0" To="{Binding ActualHeight, ElementName=devicesBorder}" Duration="0:0:0.3">
					<DoubleAnimation.EasingFunction>
						<SineEase EasingMode="EaseInOut"/>
					</DoubleAnimation.EasingFunction>
				</DoubleAnimation>
			</Storyboard>
			<Storyboard x:Key="logViewHide">
				<DoubleAnimation Storyboard.TargetProperty="Height" Storyboard.TargetName="logViewPanel" From="{Binding ActualHeight, ElementName=logViewPanel}" To="0" Duration="0:0:0.3">
					<DoubleAnimation.EasingFunction>
						<SineEase EasingMode="EaseInOut"/>
					</DoubleAnimation.EasingFunction>
				</DoubleAnimation>
			</Storyboard>
			<Storyboard x:Key="blinkArtnet">
				<DoubleAnimation Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ledArtnet" From="1" To="0" Duration="0:0:0.3"/>
			</Storyboard>


		</ResourceDictionary>

	</Grid.Resources>
	<Grid.Triggers>
		<EventTrigger RoutedEvent="ToggleButton.Checked" SourceName="logViewButton">
			<BeginStoryboard Storyboard="{StaticResource logViewShow}"/>
		</EventTrigger>
		<EventTrigger RoutedEvent="ToggleButton.Unchecked" SourceName="logViewButton">
			<BeginStoryboard x:Name="logViewHide_BeginStoryboard" Storyboard="{StaticResource logViewHide}"/>
		</EventTrigger>
		<EventTrigger RoutedEvent="FrameworkElement.Loaded">
			<BeginStoryboard Storyboard="{StaticResource blinkArtnet}"/>
		</EventTrigger>
	</Grid.Triggers>

	<Grid x:Name="mainWindow1" Background="Black" MinWidth="800">
		<Grid.RowDefinitions>
			<RowDefinition Height="10*"/>
			<RowDefinition Height="83*"/>
			<RowDefinition Height="Auto"/>
		</Grid.RowDefinitions>
		<Viewbox HorizontalAlignment="Left" VerticalAlignment="Top">
			<StackPanel x:Name="header" Margin="0" HorizontalAlignment="Left" Orientation="Horizontal" VerticalAlignment="Top">
				<StackPanel x:Name="logo" HorizontalAlignment="Left" VerticalAlignment="Bottom" Orientation="Horizontal" Margin="5,5,20,0">
					<Label  Content="Grph" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="{DynamicResource Amber}" FontSize="21.333" Padding="0,0,0,0" />
					<Label  Content="AtemBRIDGE" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="{DynamicResource White}" FontSize="21.333" Padding="0,0,0,0" FontWeight="Bold" />
				</StackPanel>
				<StackPanel x:Name="artnet" HorizontalAlignment="Left" VerticalAlignment="Center" Orientation="Horizontal" Margin="5,5,0,0">
					<Grid Margin="0,0,5,0">
						<Rectangle x:Name="ledArtnetBG" Height="5" Width="5" Fill="{DynamicResource LED_off}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0"/>
						<Rectangle x:Name="ledArtnet" Height="5" Width="5" Fill="{DynamicResource AmberLED}" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="0" Panel.ZIndex="100" StrokeThickness="0"/>
					</Grid>
					<Label  Content="ArtNet IP: " HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="{DynamicResource White50%}" FontSize="14" Padding="0,0,0,0" FontWeight="Bold" />
					<Label Content="{Binding manager.show.artnetIP, FallbackValue=---.---.---.---}" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="{DynamicResource White}" FontSize="14" Padding="0,0,0,0" BorderBrush="{DynamicResource Grey}" FontWeight="Bold" Width="100"/>
				</StackPanel>
				<StackPanel x:Name="atem" HorizontalAlignment="Left" VerticalAlignment="Center" Orientation="Horizontal" Margin="5,5,0,0">
					<Label Content="ATEM IP: " HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="{DynamicResource White50%}" FontSize="14" Padding="0,0,0,0" FontWeight="Bold" />
					<Label Content="{Binding manager.show.atemIP, FallbackValue=---.---.---.---}" HorizontalAlignment="Left" VerticalAlignment="Top" Foreground="{DynamicResource White}" FontSize="14" Padding="0,0,0,0" BorderBrush="{DynamicResource Grey}" FontWeight="Bold" Width="100"/>
				</StackPanel>
			</StackPanel>
		</Viewbox>
		<Border x:Name="devicesBorder" BorderThickness="2" Margin="0" HorizontalAlignment="Left" Grid.Row="1" BorderBrush="{DynamicResource BorderGreyGlow}">
			<ScrollViewer x:Name="devicesScroll" HorizontalAlignment="Left" Style="{DynamicResource ScrollViewerStyle}" Foreground="White">
				<ItemsControl x:Name="devices" d:DataContext="{d:DesignData /SampleData/DeviceData/DeviceData.xaml}" ItemTemplate="{DynamicResource devicesItemTemplate}" ItemsSource="{Binding devices}" ItemsPanel="{DynamicResource devicesDataTemplate}" VerticalAlignment="Top" Foreground="{x:Null}" MinWidth="800" MinHeight="100" ScrollViewer.CanContentScroll="True" UseLayoutRounding="False"  />
			</ScrollViewer>
		</Border>
		<ScrollViewer x:Name="logViewPanel" Style="{DynamicResource ScrollViewerStyle}" CanContentScroll="True" Margin="0" Height="0" VerticalAlignment="Bottom" Grid.Row="1" Foreground="White">
			<Border x:Name="logViewBG" BorderBrush="#FF5E5E5E" BorderThickness="0,2,0,0" Padding="0,5,0,0">
				<Border.Background>
					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
						<GradientStop Color="#FF2B2B2B" Offset="0"/>
						<GradientStop Color="Black" Offset="1"/>
					</LinearGradientBrush>
				</Border.Background>
				<ItemsControl x:Name="logView" d:DataContext="{d:DesignData /SampleData/DeviceData/DeviceData.xaml}" ItemTemplate="{DynamicResource logItemTemplate}" ItemsSource="{Binding log.msgAll}" ItemsPanel="{DynamicResource logDataTemplate}" Background="Transparent" BorderBrush="Transparent" VerticalAlignment="Top" Foreground="{x:Null}" ScrollViewer.CanContentScroll="True" UseLayoutRounding="False"  />
			</Border>
		</ScrollViewer>
		<Viewbox Grid.Row="2" HorizontalAlignment="Left" VerticalAlignment="Top">
			<ToggleButton x:Name="logViewButton" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="{x:Null}" HorizontalContentAlignment="Left" VerticalContentAlignment="Stretch" Margin="0" VerticalAlignment="Top" FontSize="8">
				<TextBlock x:Name="logMsg" Text="{Binding log.msgLast, FallbackValue=Last Log Message}" Foreground="{DynamicResource White50%}" FontSize="12" Padding="0,0,0,0" Margin="0" Width="800" />
			</ToggleButton>
		</Viewbox>
	</Grid>
</Grid>

 
User avatar
sfernandez
Site Admin
Posts: 1911
Joined: 22 Dec 2011, 19:20

Re: Font size differs between Unity Editor & Stand-alone

12 May 2015, 01:39

Looking at the xaml I can see that you divided the screen in 3 rows using a Grid.

The last row is set to Auto and contains a Viewbox with a text that measures 800px width, so it will try to fit these 800 pixels in the width of the screen, and scaling the height uniformly.

The first row takes ~10% (10/(10+83)) of the remaining screen space, and contains also a Viewbox, so the labels inside will scale to fit in that relative height.

The center row takes ~90% (83/(10+83)) of the remaining screen space, and contains a ScrollViewer with an 800px width ItemsControl. These elements are not scaled because they are not inside a Viewbox.

So, I will say that the behavior is correct, the size of those texts depend on the size of the screen.
 
jeroenvdv
Topic Author
Posts: 13
Joined: 15 Sep 2014, 20:21

Re: Font size differs between Unity Editor & Stand-alone

13 May 2015, 00:30

My apologies. I've uploaded the later changed XAML which I used as a "workaround" for the time being. The screendump was taken from the previous version without a viewbox in the first and last row. Will check that version tomorrow and upload (with screendump containing Blend, Unity Editor & Standalone next to each other)..
 
User avatar
jsantos
Site Admin
Posts: 2899
Joined: 20 Jan 2012, 17:18
Contact:

Re: Font size differs between Unity Editor & Stand-alone

19 May 2015, 15:08

Any news about this?

Who is online

Users browsing this forum: No registered users and 1 guest