How to turn off touch in Windows 8

Quick description how to disable your Windows 8 touch screen. Continue reading

Advertisements

How to fix scroll in Semantic Zoom (zoom-out)

I believe every WinRT Developer know what is Semantic Zoom in Window Store Apps:

Semantic zoom - normal view (zoom-in)

Semantic zoom – normal view (zoom-in)

Semantic zoom - grouped view (zoom-out)

Semantic zoom – grouped view (zoom-out)

But if you don’t know what I’m talking about you can read MSDN here or watch Channel 9 here.

The Problem

What I was facing some time ago was related to zoom-out state of Semantic Zoom control.  It’s only XAML/UI issue.

When you have lot of content to show in zoomed-out state you will have horizontal scroll. By default it’s working OK but issue is when you reach edge. If you try to scroll your content even far more you will see that whole Semantic Zoom control (or it’s content) move out and background is showed.

Semantic zoom - broken horizontal scroll

Semantic zoom – broken horizontal scroll

In my case it’s header (TextBlock) and these big tiles in GridView control.

BTW: Yes, it’s possible to trick Semantic Zoom control to put not only GridView or ListView as it’s Child. I will make another post about it. Here you can see Grid with 2 rows (for header and content).

Anyway.. my expected UI result is to block header+background and move a bit content (big tiles). I will look nice and give visual feedback to user that he reach end of content.

Semantic zoom - fixed horizontal scroll

Semantic zoom – fixed horizontal scroll

It’s the same result as in Windows 8 Start screen or most of Windows Store apps that use Semantic Zoom.

The Solution

To solve the problem you have to change default Semantic Zoom style. I have found it somewhere on web and copied here. You can do the same and copy this big chunk of XAML into your App.xaml or View.xaml or any other place you keep styles:

<Style TargetType="SemanticZoom">
<Setter Property="Padding" Value="3"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="BorderThickness" Value="0"/>
<Setter Property="IsTabStop" Value="False"/>
<Setter Property="TabNavigation" Value="Once"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled"/>
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False"/>
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled"/>
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="SemanticZoom">
<Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="SemanticZoomStates">
<VisualState x:Name="ZoomInView">
<Storyboard>
<FadeOutThemeAnimation TargetName="ZoomedOutPresenter"/>
<FadeInThemeAnimation TargetName="ZoomedInPresenter"/>
</Storyboard>
</VisualState>
<VisualState x:Name="ZoomOutView">
<Storyboard>
<FadeOutThemeAnimation TargetName="ZoomedInPresenter"/>
<FadeInThemeAnimation TargetName="ZoomedOutPresenter"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
<VisualStateGroup x:Name="ZoomOutButtonStates">
<VisualStateGroup.Transitions>
<VisualTransition From="ZoomOutButtonVisible" To="ZoomOutButtonHidden">
<Storyboard BeginTime="0:0:3">
<FadeOutThemeAnimation TargetName="ZoomOutButton"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="ZoomOutButton">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>False</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualTransition>
</VisualStateGroup.Transitions>
<VisualState x:Name="ZoomOutButtonVisible">
<Storyboard>
<FadeInThemeAnimation TargetName="ZoomOutButton"/>
</Storyboard>
</VisualState>
<VisualState x:Name="ZoomOutButtonHidden">
<Storyboard>
<FadeOutThemeAnimation TargetName="ZoomOutButton"/>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="IsHitTestVisible" Storyboard.TargetName="ZoomOutButton">
<DiscreteObjectKeyFrame KeyTime="0">
<DiscreteObjectKeyFrame.Value>
<x:Boolean>False</x:Boolean>
</DiscreteObjectKeyFrame.Value>
</DiscreteObjectKeyFrame>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<ScrollViewer x:Name="ScrollViewer" HorizontalScrollMode="Disabled" HorizontalContentAlignment="Center" HorizontalScrollBarVisibility="Hidden" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsScrollInertiaEnabled="True" IsZoomChainingEnabled="True" IsZoomInertiaEnabled="False" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" MinZoomFactor="0.5" MaxZoomFactor="1.0" VerticalScrollBarVisibility="Hidden" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" VerticalContentAlignment="Center" ZoomMode="Enabled">
<ScrollViewer.Template>
<ControlTemplate TargetType="ScrollViewer">
<ScrollContentPresenter x:Name="ScrollContentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" Margin="{TemplateBinding Padding}"/>
</ControlTemplate>
</ScrollViewer.Template>
<Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" RenderTransformOrigin="0, 0">
<Border.RenderTransform>
<CompositeTransform x:Name="ManipulatedElementTransform"/>
</Border.RenderTransform>
<Grid Margin="{TemplateBinding Padding}">
<ContentPresenter x:Name="ZoomedInPresenter" Content="{TemplateBinding ZoomedInView}" IsHitTestVisible="False" RenderTransformOrigin="0.5, 0.5" Visibility="Collapsed">
<ContentPresenter.RenderTransform>
<CompositeTransform x:Name="ZoomedInTransform"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
<ContentPresenter x:Name="ZoomedOutPresenter" Content="{TemplateBinding ZoomedOutView}" IsHitTestVisible="False" RenderTransformOrigin="0.5, 0.5" Visibility="Collapsed">
<ContentPresenter.RenderTransform>
<CompositeTransform x:Name="ZoomedOutTransform"/>
</ContentPresenter.RenderTransform>
</ContentPresenter>
</Grid>
</Border>
</ScrollViewer>
<Button x:Name="ZoomOutButton" HorizontalAlignment="Right" IsTabStop="False" Margin="0,0,7,24" VerticalAlignment="Bottom">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="Root" BorderBrush="{StaticResource SemanticZoomButtonBorderThemeBrush}" BorderThickness="1" Background="{StaticResource SemanticZoomButtonBackgroundThemeBrush}" Height="21" Width="21">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="NormalStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="PointerOver">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SemanticZoomButtonPointerOverBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SemanticZoomButtonPointerOverBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Glyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SemanticZoomButtonPointerOverForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
<VisualState x:Name="Pressed">
<Storyboard>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SemanticZoomButtonPressedBackgroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="BorderBrush" Storyboard.TargetName="Root">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SemanticZoomButtonPressedBorderThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
<ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="Glyph">
<DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SemanticZoomButtonPressedForegroundThemeBrush}"/>
</ObjectAnimationUsingKeyFrames>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<TextBlock x:Name="Glyph" Foreground="{StaticResource SemanticZoomButtonForegroundThemeBrush}" FontSize="{StaticResource SemanticZoomButtonFontSize}" FontFamily="{StaticResource SymbolThemeFontFamily}" HorizontalAlignment="Center" IsHitTestVisible="False" Margin="0,0,0,1" Text="" UseLayoutRounding="False" VerticalAlignment="Center"/>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

 

First project in MonoGame for Windows Store apps

MonoGameSo far we know that is MonoGame and how to install it. Now it’s time to create 1st MonoGame project.

This post is a part of XNA (MonoGame) for Windows Store apps series.

See also

Installing MonoGame for Windows Store apps

MonoGameMy previous post was about MonoGame project. Today I want to give you some hints about intallation procedure, because sometimes there are some problems. I’ve gathered everything together here with correct order and links.

This post is a part of XNA (MonoGame) for Windows Store apps series.

See also

Continue reading

MonoGame for Windows 8

Finally I’ve found time to take a look at MonoGame project for Windows Store apps.

This post is an introduction to a series of development and porting games for the Windows Store.

See also

Continue reading

Metro Apps 0: Introduction to the series

Windows 8 Metro Apps

New Windows 8 on the horizon – which is great news! I’m also very excited because some time ago I received a unique opportunity to prepare one of the first applications that will appear in the Windows Store, which in my case means only one thing: Metro Style Apps XAML / C #, because I don’t like HTML/JavaScript, DirectX/C++ is not my story, and there is not XNA for Metro (but we have to look at SharpDX open source project).

Kids PuzzleI decided to port (but more fit here: rewrite) my Kids Puzzle game (one of my applications on Windows Phone).

And so I thought, I’d share some notes at my blog. Topics are divided into two groups.
Continue reading

Close window on ESC

Many of todays programs and applications allows to close their modal windows by hitting ESC key. It’s cool, fast and easy. In fact, I like it so much that I curse apps which don’t have this simple piece of fuctionality and I have to manualy target X or close button.

In this post I’ll show how to add few lines of code to your Silverlight project  for close window on ESC key. But what you will see here can be also used in other platforms such as WPF or WindowsForms.
Continue reading