Small layout discrepancy
I just noticed a small layout discrepancy between Blend and Noesis while playing around with the button example.
Blend: Unity: 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
Blend: Unity: 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
Code: Select all
<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>
-
-
sfernandez
Site Admin
- Posts: 3184
- Joined:
Re: Small layout discrepancy
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.
-
-
sfernandez
Site Admin
- Posts: 3184
- Joined:
Re: Small layout discrepancy
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.
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