jrueppel
Topic Author
Posts: 6
Joined: 06 May 2014, 17:24

Small layout discrepancy

08 May 2014, 11:02

I just noticed a small layout discrepancy between Blend and Noesis while playing around with the button example.

Blend:
Screenshot 2014-05-08 10.54.52.png
Blend Screenshot
Unity:
Screenshot 2014-05-08 10.55.13.png
Unity Screenshot
Notice the right border of the top button covers the 'e' of "Pressed" in the Unity Player, but doesn't cover it in Blend.

XAML
<Grid
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Name="grid"
	mc:Ignorable="d"
	Margin="10">
	<Grid.Resources>
		<ResourceDictionary >
        <ResourceDictionary.MergedDictionaries >       
            <ResourceDictionary Source="../../../Themes/NoesisStyle.xaml"/>
        </ResourceDictionary.MergedDictionaries>
    </ResourceDictionary>

		
	</Grid.Resources>


    <Viewbox>
    
	<GroupBox HorizontalAlignment="Center" VerticalAlignment="Center" Padding="20" Background="#80272B30" Margin="50">
		<Grid>
			<Grid.ColumnDefinitions>
				<ColumnDefinition/>
				<ColumnDefinition Width="Auto"/>
			</Grid.ColumnDefinitions>
			<Grid.RowDefinitions>
				<RowDefinition Height="Auto"/>
				<RowDefinition/>
				<RowDefinition Height="Auto"/>
			</Grid.RowDefinitions>
			<TextBlock Grid.Column="0" Text="Pressed" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="10" Margin="0,0,12,0"/>
			<TextBlock Grid.Column="1" Text="Clicked" VerticalAlignment="Center" HorizontalAlignment="Right" FontSize="10"/>
			<StackPanel Grid.Row="1">
				<StackPanel.Triggers>
					<EventTrigger RoutedEvent="ButtonBase.Click">
						<BeginStoryboard>
							<Storyboard>
								<DoubleAnimation Duration="0:0:0.3" Storyboard.TargetName="Rect" Storyboard.TargetProperty="Opacity" From="0" To="1"/> 
							</Storyboard>
						</BeginStoryboard>
					</EventTrigger>
				</StackPanel.Triggers>
				<Grid Margin="0,8,0,0">
					<Grid.ColumnDefinitions>
						<ColumnDefinition/>
						<ColumnDefinition Width="50"/>
					</Grid.ColumnDefinitions>
					<Button x:Name="Button1" Content="Dies ist ein schöner Button" VerticalAlignment="Top" Padding="32,8" Margin="16.5,-36,33.5,0" Grid.ColumnSpan="2"/>
					<TextBlock Grid.Column="1" Text="{Binding IsPressed, ElementName=Button1}" VerticalAlignment="Center" Margin="8,0,0,0"/>
				</Grid>
				<Grid Margin="0,8,0,0">
					<Grid.ColumnDefinitions>
						<ColumnDefinition/>
						<ColumnDefinition Width="50"/>
					</Grid.ColumnDefinitions>
					<Button x:Name="Button2" Content="Press Button" VerticalAlignment="Center" Padding="32,8" ClickMode="Press"/>
					<TextBlock Grid.Column="1" Text="{Binding IsPressed, ElementName=Button2}" VerticalAlignment="Center" Margin="8,0,0,0"/>
				</Grid>
				<Grid Margin="0,8,0,0">
					<Grid.ColumnDefinitions>
						<ColumnDefinition/>
						<ColumnDefinition Width="50"/>
					</Grid.ColumnDefinitions>
					<Button x:Name="Button3" Content="Hover Button" VerticalAlignment="Center" Padding="32,8" ClickMode="Hover"/>
					<TextBlock Grid.Column="1" Text="{Binding IsPressed, ElementName=Button3}" VerticalAlignment="Center" Margin="8,0,0,0"/>
				</Grid>
				<Grid Margin="0,8,0,0">
					<Grid.ColumnDefinitions>
						<ColumnDefinition/>
						<ColumnDefinition Width="50"/>
					</Grid.ColumnDefinitions>
					<RepeatButton x:Name="Button4" Content="Repeat Button" VerticalAlignment="Center" Padding="32,8" Interval="{Binding Value, ElementName=Interval}" Delay="{Binding Value, ElementName=Delay}"/>
					<TextBlock Grid.Column="1" Text="{Binding IsPressed, ElementName=Button4}" VerticalAlignment="Center" Margin="8,0,0,0"/>
				</Grid>		
			</StackPanel>
			<Grid Grid.Column="1" Grid.Row="1" Margin="8,8,8,0" UseLayoutRounding="True">
				<Rectangle Fill="DodgerBlue" Width="20"/>
				<Rectangle Fill="GreenYellow" Width="20" Opacity="1" x:Name="Rect"/>
			</Grid>
			<Grid Grid.Row="2" Margin="0,8,0,0" Grid.ColumnSpan="2">
				<Grid.ColumnDefinitions>
					<ColumnDefinition Width="Auto"/>
					<ColumnDefinition Width="*"/>
					<ColumnDefinition Width="36"/>
				</Grid.ColumnDefinitions>
				<StackPanel Grid.Column="1" Margin="0,0,8,0" Orientation="Vertical" VerticalAlignment="Top">
					<Slider x:Name="Delay" Maximum="500" SmallChange="10" LargeChange="100" Value="400"/>
					<Slider x:Name="Interval" Margin="0,4,0,0" Minimum="1" Maximum="500" LargeChange="100" SmallChange="10" Value="250"/>
				</StackPanel>
				<StackPanel Orientation="Vertical">
					<Border Height="{Binding ActualHeight, ElementName=Delay}">
						<TextBlock Text="Delay: " VerticalAlignment="Center"/>
					</Border>
					<Border Height="{Binding ActualHeight, ElementName=Interval}" Margin="0,4,0,0">
						<TextBlock Text="Interval: " VerticalAlignment="Center"/>
					</Border>
				</StackPanel>
				<StackPanel Grid.Column="2" Margin="12,0,8,0" Orientation="Vertical">
					<Border HorizontalAlignment="Right" Height="{Binding ActualHeight, ElementName=Delay}">
						<TextBlock Text="{Binding Value, ElementName=Delay, StringFormat=F1}" VerticalAlignment="Center" Margin="-25,0,0,0"/>
					</Border>
					<Border HorizontalAlignment="Right" Height="{Binding ActualHeight, ElementName=Interval}" Margin="0,4,0,0">
						<TextBlock Text="{Binding Value, ElementName=Interval, StringFormat=F1}" VerticalAlignment="Center" Margin="-25,0,0,0"/>
					</Border>
				</StackPanel>
			</Grid>
		</Grid>
		
	</GroupBox>
		
	</Viewbox>
	
</Grid>
 
User avatar
sfernandez
Site Admin
Posts: 3184
Joined: 22 Dec 2011, 19:20

Re: Small layout discrepancy

08 May 2014, 13:46

I think the differences are produced because the fonts used are not the same. Blend would probably be using the default Windows font: Segoe UI, while we use (if no font family is specified) the Roboto font that seems a bit narrower.
 
User avatar
sfernandez
Site Admin
Posts: 3184
Joined: 22 Dec 2011, 19:20

Re: Small layout discrepancy

08 May 2014, 17:41

I was thinking about this issue and I realized we have a problem with our sample Themes. These themes should have a Setter for the FontFamily, and we should provide the Roboto font so it can be added to the Blend project. This way, the samples would look exactly the same.

I take note of this problem and will fix it for a future release.

Who is online

Users browsing this forum: No registered users and 6 guests