Creating a behavior or action to close a Flyout from a control within the Flyout 8. May 2015 Shawn Universal Apps (0) I recently started work on a new project and I’m trying hard to use “no code-behind”. This has been challenging for me as I tend to always put very view specific logic within the view itself. Things like navigation, starting storyboards or showing popups/flyouts. One thing I was trying to do recently was close a Flyout from a button within the flyout. My first approach was to try an EventTriggerBehavior for the Click event of the button along with the CallMethodAction. I tried two ways to call the Hide method on the flyout. 1: <Button x:Name="AddButton" Content="Add Item" > 2: <Button.Flyout> 3: <Flyout x:Name="AddItemFlyout" 4: Placement="Full"> 5: <StackPanel> 6: <TextBox x:Name="PlaceName" Header="Name"/> 7: <Grid> 8: <Grid.ColumnDefinitions> 9: <ColumnDefinition/> 10: <Col... [More]
Animating list items within Windows apps 17. April 2015 Shawn Windows Apps (0) In a previous post I’ve talked about some page transitions and animations within Windows apps. There are many other locations where adding animations is very easy. One of these is animating items within any ItemsControl class. This includes controls like the ListView/GridView controls. The ItemsControl exposes the ItemContainerTransitions property. This property exposes a TransitionCollection, the same collection I talked about in the previous post. One of the key transitions you’ll want to look at is the EntranceThemeTransition. The EntranceThemeTransition defines how items will enter the region when they are rendered. It contains three properties. FromVerticalOffset and FromHorizontalOffset define the where the item should start rendering, with respect to where the final location will be. So if you have a FromVerticalOffset of 100, the item will begin an entrance animation 100 pixels below where it will end. The last property IsStaggeringEnabled, defines if all items should animate ... [More]
In depth look at the Windows RelativePanel 9. April 2015 Shawn Windows Apps (0) Windows 10 released a lot of new functionality and controls. One of the new controls is the RelativePanel. This panel takes the great Grid panel and cranks it up to 11. The Grid panel gives a lot of control with how you layout controls. You specify rows and columns of various heights and widths and then place controls within the grid and define the row and/or column through attached properties. Instead of rows/columns, the RelativePanel places controls relative to itself or other controls within it. Just like the Grid, the RelativePanel uses 16 different attached properties to define where elements should be placed. In fact, the RelativePanel has no additional properties or methods from a regular Panel. It only contains attached properties. Aligning relative to the RelativePanel The relative panel does not respect controls with traditional alignment via HorizontalAlignment and VerticalAlignment. Instead there are six new properties to define how an element should align relative to th... [More]
Registering to any DependencyProperty changing in Windows 10 Apps 1. April 2015 Shawn Windows Apps (0) Many have argued that there are pieces still missing from Windows Runtime XAML that were in WPF. One item that was in WPF was the ability to be notified when a DependencyProperty changed. This functionality is now available in Windows Apps thanks to the new RegisterProperrtyChangedCallback method on DependencyObject. This opens up a world of opportunities for us. This functionality is extremely useful when creating custom controls or wrapping existing controls. Rather than getting into anything complex, I’ll show a quick sample. A TextBlock control has Text, but no way to be notified when the text changes. We do have the ability to bind to the Text, but we’ll ignore that for now. We’ll create two TextBlocks and one Button. <StackPanel> <TextBlock x:Name="CounterText"/> <Button Content="Click me" Click="OnButtonClicked"/> <TextBlock x:Name="DuplicateTextBlock"/></StackPanel> When the button is clicked we’ll set the text for the first TextBlock... [More]
Creating a WrapPanel for your Windows Runtime apps 20. February 2015 Shawn Windows Runtime (0) Recently I saw a friend, Glenn Versweyveld, write a blog about showing a “tags” (eg blog tags) within an app. The blog documents how to create a horizontal list of tags that are not formed into columns and rows. The list would let the items flow naturally. He used something I never would have thought of to accomplish this. He used a RichTextBlock. This was a rather cool idea that again, I would have never thought of. When I saw the blog I quickly asked why he did not just use a GridView or a WrapGrid/ItemsWrapGrid. His simple reply was that it did not accomplish what he wanted due to the row/column layout.. If you are on “Big Windows” the GridView lays items out into columns and rows, by filling up columns from left to right. If you are on Windows Phone the Grid View also lays items in rows and columns, but it fills up rows first instead of columns. The right picture shows Big Windows and the left shows phone. Ok, so GridView is out, how about a ListView and change the ItemsPan... [More]
Getting and Setting the SeletedIndex (visible section) of the Hub, now with Binding! 26. August 2014 Shawn Universal Apps (0) In my last post I talked about how you can restore the last visible section of the Hub. In that post I talked about the lack of the SelectedIndex and SelectedItem properties in the Hub control. These properties were in the Panorama control. Not having these properties means setting the visible section from a view model requires access to the Hub. This is not ideal. When functionality is not available, create it! When you want to add functionality to a control there are two basic solutions. Extend the control by creating a new one. Extend the control with attached properties The first solution is generally accomplished by inheriting from the control itself. The second is most often solved with a behavior. Whenever possible I prefer option 1 over option 2. The downside to option 1 is adding more and more functionality trying to come up with a good name for your control. Extending existing controls is really easy. There [usually] is not a need to create a new style for the control. We ... [More]
Restore the last visible Hub Section with the DefaultSectionIndex 22. August 2014 Shawn Windows Phone (0) Use the DefaultSectionIndex to open the Hub to the appropriate page. [More]
Disabling tilt on a ListView or GridView 9. July 2014 Shawn Windows Phone (0) I have mentioned before that the tilt animation is enabled by default in Windows Phone 8.1 Runtime apps, but what happens when you want to display a collection of items but do not want to enable tilt? You may not want to enable tilt because there is no extra action that happens when you tap an item. As with most things, there are a few options here. The first is to not use a ListView/GridView at all. Instead just use an ItemsControl to display your items. This is great provided you do not have a lot of items you need to show. ItemsControl is not virtualized like the ListView/GridView so it uses a lot of memory when displaying a lot of items. This is my go to control for displaying a small collection of items that have no action associated with them. If you still want to use the ListView or GridView control then there is a simple way to disable the animation. You will need to modify the style of the ListViewItem or GridViewItem. For this post I will demonstrate using the ListViewItem,... [More]
Tilt animation for Windows Phone Runtime 8. July 2014 Shawn Windows Phone (0) In a previous post I talked about some of the awesome animations and transitions available in Window Phone 8.1 Runtime apps. These animations and transitions were previously only available with a second SDK like the Windows Phone Toolkit or Telerik’s phone controls. One of the most used animations from both toolkit was the tilt animation. This animation shows a user that what they are touching can be tapped and will probably do something when they do tap. I also previously blogged about how you can enable the tilt animation for “unselectable” items. I am happy to say that the tilt animation is now built into all “tappable” controls without having to do anything! So you would think that would be the end of the post right? I just said “it just works”. This is true for things like ListView/GridView/Buton, but what about when you want to display a StackPanel with a few items in it and those items should be tiltable? Some work is needed to get this working and there are a few ways to accom... [More]
Alternatives to OpacityMask 7. July 2014 Shawn Windows Runtime (0) In Windows Phone Silverlight apps you had the ability to take a png image and change the color of the image with an OpacityMask. This is a really handy tool to have when you want to show different state to a user or use one image and have it work with different backgrounds. Where is an example: <StackPanel Orientation="Horizontal"> <Image Source="Assets/appbar.book.png" Width="72" Height="72"></Image> <Rectangle Fill="Red" Width="72" Height="72" > <Rectangle.OpacityMask> <ImageBrush ImageSource="Assets/appbar.book.png" Stretch="Fill"/> </Rectangle.OpacityMask> </Rectangle> <Border Background="{StaticResource PhoneForegroundBrush}" Width="72" Height="72" > <Rectangle Fill="{StaticResource PhoneBackgroundBrush}" > <Rectangle.OpacityMask> <Image... [More]