Search Results

Search found 460 results on 19 pages for 'stackpanel'.

Page 2/19 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12 | Next Page >

How to get a TextBlock to wrap text inside a DockPanel area?

- by Edward Tanguay

What do I have to do to get the inner TextBlock below to wrap its text without defining an absolute width? I've tried Width=Auto, Stretch, TextWrapping, putting it in a StackPanel, nothing seems to work. XAML: <UserControl x:Class="Test5.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:tk="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" Width="800" Height="600"> <tk:DockPanel LastChildFill="True"> <StackPanel tk:DockPanel.Dock="Top" Width="Auto" Height="50" Background="#eee"> <TextBlock Text="{Binding TopContent}"/> </StackPanel> <StackPanel tk:DockPanel.Dock="Bottom" Background="#bbb" Width="Auto" Height="50"> <TextBlock Text="bottom area"/> </StackPanel> <StackPanel tk:DockPanel.Dock="Right" Background="#ccc" Width="200" Height="Auto"> <TextBlock Text="info panel"/> </StackPanel> <StackPanel tk:DockPanel.Dock="Left" Background="#ddd" Width="Auto" Height="Auto"> <ScrollViewer HorizontalScrollBarVisibility="Auto" Padding="10" BorderThickness="0" Width="Auto" VerticalScrollBarVisibility="Auto"> <tk:DockPanel HorizontalAlignment="Left" Width="Auto" > <StackPanel tk:DockPanel.Dock="Top" HorizontalAlignment="Left"> <Button Content="Add More" Click="Button_Click"/> </StackPanel> <TextBlock tk:DockPanel.Dock="Top" Text="{Binding MainContent}" Width="Auto" TextWrapping="Wrap" /> </tk:DockPanel> </ScrollViewer> </StackPanel> </tk:DockPanel> </UserControl>

Read the article
How to assign a dynamic imagebrush resource to a stackpanel's background in code?

- by Edward Tanguay

I currently define the background for a user control like this: <UserControl.Background> <ImageBrush ImageSource="{DynamicResource LeftMenuBackgroundImage}" /> </UserControl.Background> How can I move this to code-behind, e.g.: PSEUDO-CODE: StackPanel sp = new StackPanel(); sp.Background = new ImageBrush(DynamicResource.GetResourceName("LeftMenuBackgroundImage"));

Read the article
'Content' is NOT 'Text' in XAML

- by psheriff

One of the key concepts in XAML is that the Content property of a XAML control like a Button or ComboBoxItem does not have to contain just textual data. In fact, Content can be almost any other XAML that you want. To illustrate here is a simple example of how to spruce up your Button controls in Silverlight. Here is some very simple XAML that consists of two Button controls within a StackPanel on a Silverlight User Control. <StackPanel> <Button Name="btnHome" HorizontalAlignment="Left" Content="Home" /> <Button Name="btnLog" HorizontalAlignment="Left" Content="Logs" /></StackPanel> The XAML listed above will produce a Silverlight control within a Browser that looks like Figure 1. Figure 1: Normal button controls are quite boring. With just a little bit of refactoring to move the button attributes into Styles, we can make the buttons look a little better. I am a big believer in Styles, so I typically create a Resources section within my user control where I can factor out the common attribute settings for a particular set of controls. Here is a Resources section that I added to my Silverlight user control. <UserControl.Resources> <Style TargetType="Button" x:Key="NormalButton"> <Setter Property="HorizontalAlignment" Value="Left" /> <Setter Property="MinWidth" Value="50" /> <Setter Property="Margin" Value="10" /> </Style></UserControl.Resources> Now back in the XAML within the Grid control I update the Button controls to use the Style attribute and have each button use the Static Resource called NormalButton. <StackPanel> <Button Name="btnHome" Style="{StaticResource NormalButton}" Content="Home" /> <Button Name="btnLog" Style="{StaticResource NormalButton}" Content="Logs" /></StackPanel> With the additional attributes set in the Resources section on the Button, the above XAML will now display the two buttons as shown in Figure 2. Figure 2: Use Resources to Make Buttons More Consistent Now let’s re-design these buttons even more. Instead of using words for each button, let’s replace the Content property to use a picture. As they say… a picture is worth a thousand words, so let’s take advantage of that. Modify each of the Button controls and eliminate the Content attribute and instead, insert an <Image> control with the <Button> and the </Button> tags. Add a ToolTip to still display the words you had before in the Content and you will now have better looking buttons, as shown in Figure 3. Figure 3: Using pictures instead of words can be an effective method of communication The XAML to produce Figure 3 is shown in the following listing: <StackPanel> <Button Name="btnHome" ToolTipService.ToolTip="Home" Style="{StaticResource NormalButton}"> <Image Style="{StaticResource NormalImage}" Source="Images/Home.jpg" /> </Button> <Button Name="btnLog" ToolTipService.ToolTip="Logs" Style="{StaticResource NormalButton}"> <Image Style="{StaticResource NormalImage}" Source="Images/Log.jpg" /> </Button></StackPanel> You will also need to add the following XAML to the User Control’s Resources section. <Style TargetType="Image" x:Key="NormalImage"> <Setter Property="Width" Value="50" /></Style> Add Multiple Controls to Content Now, since the Content can be whatever we want, you could also modify the Content of each button to be a StackPanel control. Then you can have an image and text within the button. <StackPanel> <Button Name="btnHome" ToolTipService.ToolTip="Home" Style="{StaticResource NormalButton}"> <StackPanel> <Image Style="{StaticResource NormalImage}" Source="Images/Home.jpg" /> <TextBlock Text="Home" Style="{StaticResource NormalTextBlock}" /> </StackPanel> </Button> <Button Name="btnLog" ToolTipService.ToolTip="Logs" Style="{StaticResource NormalButton}"> <StackPanel> <Image Style="{StaticResource NormalImage}" Source="Images/Log.jpg" /> <TextBlock Text="Logs" Style="{StaticResource NormalTextBlock}" /> </StackPanel> </Button></StackPanel> You will need to add one more resource for the TextBlock control too. <Style TargetType="TextBlock" x:Key="NormalTextBlock"> <Setter Property="HorizontalAlignment" Value="Center" /></Style> All of the above will now produce the following: Figure 4: Add multiple controls to the content to make your buttons even more interesting. Summary While this is a simple example, you can see how XAML Content has great flexibility. You could add a MediaElement control as the content of a Button and play a video within the Button. Not that you would necessarily do this, but it does work. What is nice about adding different content within the Button control is you still get the Click event and other attributes of a button, but it does necessarily look like a normal button. Good Luck with your Coding,Paul Sheriff ** SPECIAL OFFER FOR MY BLOG READERS **Visit http://www.pdsa.com/Event/Blog for a free video on Silverlight entitled "Silverlight XAML for the Complete Novice - Part 1."

Read the article
Should I inherit from a stackpanel instead of a stack panel, grid or other UI element or UserControl

- by Joel Barsotti

So I'm building a peice of UI that might me in a dialog window or might be in embedded in part of a bigger page. I don't have alot of experience with WPF, but in ASP.NET you always used UserControls, because their wasn't anyt really generic UI inherit to inherit from (and in a way UserControl was just a div). My coworker has written alot of controls that inherit directly from stackpanel. That seems like a decent way of doing things. But when I went to create a control for the code I was going to write I was presented with a dialog that only included the UserControl, which I wasn't that familiar with in the context of WPF. So can someone explain to me the difference from building a control that inherits from user control vs inheriting directly from a stackPanel?

Read the article
Adding Volcanos and Options - Earthquake Locator, part 2

- by Bobby Diaz

Since volcanos are often associated with earthquakes, and vice versa, I decided to show recent volcanic activity on the Earthquake Locator map. I am pulling the data from a website created for a joint project between the Smithsonian's Global Volcanism Program and the US Geological Survey's Volcano Hazards Program, found here. They provide a Weekly Volcanic Activity Report as an RSS feed. I started implementing this new functionality by creating a new Volcano entity in the domain model and adding the following to the EarthquakeService class (I also factored out the common reading/parsing helper methods to a separate FeedReader class that can be used by multiple domain service classes): private static readonly string VolcanoFeedUrl = ConfigurationManager.AppSettings["VolcanoFeedUrl"]; /// <summary> /// Gets the volcano data for the previous week. /// </summary> /// <returns>A queryable collection of <see cref="Volcano"/> objects.</returns> public IQueryable<Volcano> GetVolcanos() { var feed = FeedReader.Load(VolcanoFeedUrl); var list = new List<Volcano>(); if ( feed != null ) { foreach ( var item in feed.Items ) { var quake = CreateVolcano(item); if ( quake != null ) { list.Add(quake); } } } return list.AsQueryable(); } /// <summary> /// Creates a <see cref="Volcano"/> object for each item in the RSS feed. /// </summary> /// <param name="item">The RSS item.</param> /// <returns></returns> private Volcano CreateVolcano(SyndicationItem item) { Volcano volcano = null; string title = item.Title.Text; string desc = item.Summary.Text; double? latitude = null; double? longitude = null; FeedReader.GetGeoRssPoint(item, out latitude, out longitude); if ( !String.IsNullOrEmpty(title) ) { title = title.Substring(0, title.IndexOf('-')); } if ( !String.IsNullOrEmpty(desc) ) { desc = String.Join("\n\n", desc .Replace("<p>", "") .Split( new string[] { "</p>" }, StringSplitOptions.RemoveEmptyEntries) .Select(s => s.Trim()) .ToArray()) .Trim(); } if ( latitude != null && longitude != null ) { volcano = new Volcano() { Id = item.Id, Title = title, Description = desc, Url = item.Links.Select(l => l.Uri.OriginalString).FirstOrDefault(), Latitude = latitude.GetValueOrDefault(), Longitude = longitude.GetValueOrDefault() }; } return volcano; } I then added the corresponding LoadVolcanos() method and Volcanos collection to the EarthquakeViewModel class in much the same way I did with the Earthquakes in my previous article in this series. Now that I am starting to add more information to the map, I wanted to give the user some options as to what is displayed and allowing them to choose what gets turned off. I have updated the MainPage.xaml to look like this: <UserControl x:Class="EarthquakeLocator.MainPage" 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" xmlns:basic="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" xmlns:bing="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl" xmlns:vm="clr-namespace:EarthquakeLocator.ViewModel" mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480" > <UserControl.Resources> <DataTemplate x:Key="EarthquakeTemplate"> <Ellipse Fill="Red" Stroke="Black" StrokeThickness="1" Width="{Binding Size}" Height="{Binding Size}" bing:MapLayer.Position="{Binding Location}" bing:MapLayer.PositionOrigin="Center"> <ToolTipService.ToolTip> <StackPanel> <TextBlock Text="{Binding Title}" FontSize="14" FontWeight="Bold" /> <TextBlock Text="{Binding UtcTime}" /> <TextBlock Text="{Binding LocalTime}" /> <TextBlock Text="{Binding DepthDesc}" /> </StackPanel> </ToolTipService.ToolTip> </Ellipse> </DataTemplate> <DataTemplate x:Key="VolcanoTemplate"> <Polygon Fill="Gold" Stroke="Black" StrokeThickness="1" Points="0,10 5,0 10,10" bing:MapLayer.Position="{Binding Location}" bing:MapLayer.PositionOrigin="Center" MouseLeftButtonUp="Volcano_MouseLeftButtonUp"> <ToolTipService.ToolTip> <StackPanel> <TextBlock Text="{Binding Title}" FontSize="14" FontWeight="Bold" /> <TextBlock Text="Click icon for more information..." /> </StackPanel> </ToolTipService.ToolTip> </Polygon> </DataTemplate> </UserControl.Resources> <UserControl.DataContext> <vm:EarthquakeViewModel AutoLoadData="True" /> </UserControl.DataContext> <Grid x:Name="LayoutRoot"> <bing:Map x:Name="map" CredentialsProvider="--Your-Bing-Maps-Key--" Center="{Binding MapCenter, Mode=TwoWay}" ZoomLevel="{Binding ZoomLevel, Mode=TwoWay}"> <bing:MapItemsControl ItemsSource="{Binding Earthquakes}" ItemTemplate="{StaticResource EarthquakeTemplate}" /> <bing:MapItemsControl ItemsSource="{Binding Volcanos}" ItemTemplate="{StaticResource VolcanoTemplate}" /> </bing:Map> <basic:TabControl x:Name="tabs" VerticalAlignment="Bottom" MaxHeight="25" Opacity="0.7"> <basic:TabItem Margin="90,0,-90,0" MouseLeftButtonUp="TabItem_MouseLeftButtonUp"> <basic:TabItem.Header> <TextBlock x:Name="txtHeader" Text="Options" FontSize="13" FontWeight="Bold" /> </basic:TabItem.Header> <StackPanel Orientation="Horizontal"> <TextBlock Text="Earthquakes:" FontWeight="Bold" Margin="3" /> <StackPanel Margin="3"> <CheckBox Content=" < 4.0" IsChecked="{Binding ShowLt4, Mode=TwoWay}" /> <CheckBox Content="4.0 - 4.9" IsChecked="{Binding Show4s, Mode=TwoWay}" /> <CheckBox Content="5.0 - 5.9" IsChecked="{Binding Show5s, Mode=TwoWay}" /> </StackPanel> <StackPanel Margin="10,3,3,3"> <CheckBox Content="6.0 - 6.9" IsChecked="{Binding Show6s, Mode=TwoWay}" /> <CheckBox Content="7.0 - 7.9" IsChecked="{Binding Show7s, Mode=TwoWay}" /> <CheckBox Content="8.0 +" IsChecked="{Binding ShowGe8, Mode=TwoWay}" /> </StackPanel> <TextBlock Text="Other:" FontWeight="Bold" Margin="50,3,3,3" /> <StackPanel Margin="3"> <CheckBox Content="Volcanos" IsChecked="{Binding ShowVolcanos, Mode=TwoWay}" /> </StackPanel> </StackPanel> </basic:TabItem> </basic:TabControl> </Grid> </UserControl> Notice that I added a VolcanoTemplate that uses a triangle-shaped Polygon to represent the Volcano locations, and I also added a second <bing:MapItemsControl /> tag to the map to bind to the Volcanos collection. The TabControl found below the map houses the options panel that will present the user with several checkboxes so they can filter the different points based on type and other properties (i.e. Magnitude). Initially, the TabItem is collapsed to reduce it's footprint, but the screen shot below shows the options panel expanded to reveal the available settings: I have updated the Source Code and Live Demo to include these new features. Happy Mapping!

Read the article
WPF Formatting Issues - Automatically stretching and resizing?

- by Adam S

I'm very new to WPF and XAML. I am trying to design a basic data entry form. I have used a stack panel holding four more stack panels to get the layout I want. Perhaps a grid would be better for this, I am not sure. Here is an image of my form in action: http://yfrog.com/7gscreenshot1impp And here is the XAML code that generates it: <Window x:Class="Test1.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="224" Width="536.762"> <StackPanel Height="Auto" Name="stackPanel1" Width="Auto" Orientation="Horizontal"> <StackPanel Height="Auto" Name="stackPanel2" Width="Auto"> <Label Height="Auto" Name="label1" Width="Auto">Patient Name:</Label> <Label Height="Auto" Name="label2" Width="Auto">Physician:</Label> <Label Height="Auto" Name="label3" Width="Auto">Insurance:</Label> <Label Height="Auto" Name="label4" Width="Auto">Therapy Goals:</Label> </StackPanel> <StackPanel Height="Auto" Name="stackPanel3" Width="Auto"> <TextBox Height="Auto" Name="textBox1" Width="Auto" Padding="3" Margin="1" /> <TextBox Height="Auto" Name="textBox2" Width="Auto" Padding="3" Margin="1" /> <TextBox Height="Auto" Name="textBox3" Width="Auto" Padding="3" Margin="1" /> <TextBox Height="Auto" Name="textBox4" Width="Auto" Padding="3" Margin="1" /> </StackPanel> <StackPanel Height="Auto" Name="stackPanel4" Width="Auto"> <Label Height="Auto" Name="label5" Width="Auto">Date:</Label> <Label Height="Auto" Name="label6" Width="Auto">Patient Phone:</Label> <Label Height="Auto" Name="label7" Width="Auto">Facility:</Label> <Label Height="Auto" Name="label8" Width="Auto">Referring Physician:</Label> </StackPanel> <StackPanel Height="Auto" Name="stackPanel5" Width="Auto"> <TextBox Height="Auto" Name="textBox5" Width="Auto" Padding="3" Margin="1" /> <TextBox Height="Auto" Name="textBox6" Width="Auto" Padding="3" Margin="1" /> <TextBox Height="Auto" Name="textBox7" Width="Auto" Padding="3" Margin="1" /> <TextBox Height="Auto" Name="textBox8" Width="Auto" Padding="3" Margin="1" /> </StackPanel> </StackPanel> </Window> What I really want is for the text boxes to stretch equally to fill up the space horizontally. I would also like for the controls in each vertical stackpanel to 'spread out' evenly as the window is resized vertically. Can any of you experts out there help me out?

Read the article
how to add some checkboxes in stackPanel at runtime?

- by sillytweety

Hi all, I am a new silverlight user and struggle a bit with the coding. Could anyone please help me. What I am trying to do is create a list of checkboxes in a stackpanel on my application at runtime. The amount of checkboxes is determined by the amount of classnames in my sql database. I am using vb

Read the article
Is there a way to touch-enable scrolling in a WPF ScrollViewer?

- by Brian Sullivan

I'm trying to create a form in a WPF application that will allow the user to use iPhone-like gestures to scroll through the available fields. So, I've put all my form controls inside a StackPanel inside a ScrollViewer, and the scrollbar shows up as expected when there are too many elements to be shown on the screen. However, when I try to test this on my touch-enabled device, a panning gesture (placing a finger down on the surface and dragging it upward) does not move the viewable area down as I would expect. When I simply put a number of elements inside a ListView, the touch gestures work just fine. Is there any way to enable the same kind of behavior in a ScrollViewer? My window is structured like this: <Window x:Class="TestTouchScrolling.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" Loaded="Window_Loaded"> <Grid> <ScrollViewer Name="viewer" VerticalScrollBarVisibility="Auto"> <StackPanel Name="panel"> <StackPanel Orientation="Horizontal"> <Label>Label 1:</Label> <TextBox Name="TextBox1"></TextBox> </StackPanel> <StackPanel Orientation="Horizontal"> <Label>Label 2:</Label> <TextBox Name="TextBox2"></TextBox> </StackPanel> <StackPanel Orientation="Horizontal"> <Label>Label 3:</Label> <TextBox Name="TextBox3"></TextBox> </StackPanel>  </StackPanel> </ScrollViewer> </Grid>

Read the article
WP7/silverlight Images does not stay within a grid/stackpanel when using the toolkit to provide gesture support

- by gforg

I have few buttons and below that I am displaying an image and have used the WP7/Silverlight toolkit to provide support for Gestures. Everything works fine, until i do gestures like pinch and then moving it up/down. Both these gestures work fine but they do not seem to respect the stackpanel/grid the image is present in and they go over that and on top of the buttons. Do u know how to restrict these? I see the following function when gestures are called. private void OnPinchStarted(object sender, PinchStartedGestureEventArgs e) { initialAngle = ImageScaling.Rotation; initialScale = ImageScaling.ScaleX; } private void OnPinchDelta(object sender, PinchGestureEventArgs e) { ImageScaling.Rotation = initialAngle + e.TotalAngleDelta; ImageScaling.ScaleX = ImageScaling.ScaleY = initialScale * e.DistanceRatio; } private void OnDragDelta(object sender, DragDeltaGestureEventArgs e) { ImageScaling.TranslateX += e.HorizontalChange; ImageScaling.TranslateY += e.VerticalChange; }

Read the article
Avoid the collapsing effect on TreeView after updating data

- by Manolete

I have a TreeView used to display events. It works great, however every time new events are coming in and populating the tree collapse the tree again to the original position. That is very annoying when the refresh time is less than 1 second and it does not allow the user to interact with the items of the tree. Is there any way to avoid this behaviour? <TreeView Margin="1" BorderThickness="0" Name="eventsTree" ItemsSource="{Binding EventAlertContainers}" Background="#00000000" ScrollViewer.VerticalScrollBarVisibility="Auto" FontSize="14" VirtualizingStackPanel.IsVirtualizing="True"> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type C:EventAlertContainer}" ItemsSource="{Binding EventAlerts}"> <StackPanel Orientation="Horizontal"> <Image Width="20" Height="20" Margin="3,0" Source="Resources\Process_info_32.png" /> <TextBlock FontWeight="Bold" FontSize="16" Text="{Binding Description}" /> </StackPanel> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type C:EventAlert}" ItemsSource="{Binding Events}"> <StackPanel Orientation="Horizontal"> <Image Width="20" Height="20" Margin="0,0" Source="Resources\clock2_32.jpg" /> <TextBlock FontWeight="DemiBold" FontSize="14" Text="{Binding Name}" /> </StackPanel> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type C:Event}"> <StackPanel Orientation="Horizontal"> <Image Width="20" Height="20" Margin="0,0" Source="Resources\Task_32.png" /> <StackPanel Orientation="Vertical"> <TextBlock FontSize="12" Text="{Binding Name}" /> </StackPanel> </StackPanel> </HierarchicalDataTemplate> </TreeView.Resources> </TreeView>

Read the article
WPF storyboard animation issue when using VisualBrush

- by Flack

Hey guys, I was playing around with storyboards, a flipping animation, and visual brushes. I have encountered an issue though. Below is the xaml and code-behind of a small sample I quickly put together to try to demonstrate the problem. When you first start the app, you are presented with a red square and two buttons. If you click the "Flip" button, the red square will "flip" over and a blue one will appear. In reality, all that is happening is that the scale of the width of the StackPanel that the red square is in is being decreased until it reaches zero and then the StackPanel where a blue square is, whose width is initially scaled to zero, has its width increased. If you click the "Flip" button a few times, the animation looks ok and smooth. Now, if you hit the "Reflection" button, a reflection of the red/blue buttons is added to their respective StackPanels. Hitting the "Flip" button now will still cause the flip animation but it is no longer a smooth animation. The StackPanels width often does not shrink to zero. The width shrinks somewhat but then just stops before being completely invisible. Then the other StackPanel appears as usual. The only thing that changed was adding the reflection, which is just a VisualBrush. Below is the code. Does anyone have any idea why the animations are different between the two cases (stalling in the second case)? Thanks. <Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xml:lang="en-US" xmlns:d="http://schemas.microsoft.com/expression/blend/2006" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WpfFlipTest.Window1" x:Name="Window" Title="Window1" Width="214" Height="224"> <Window.Resources> <Storyboard x:Key="sbFlip"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="redStack" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetName="blueStack" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="sbFlipBack"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="blueStack" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.4" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.4" Storyboard.TargetName="redStack" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.8" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Grid x:Name="LayoutRoot" Background="Gray"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <StackPanel Name="redStack" Grid.Row="0" Grid.Column="0" RenderTransformOrigin="0.5,0.5"> <StackPanel.RenderTransform> <ScaleTransform/> </StackPanel.RenderTransform> <Border Name="redBorder" BorderBrush="Transparent" BorderThickness="4" Width="Auto" Height="Auto"> <Button Margin="0" Name="redButton" Height="75" Background="Red" Width="105" /> </Border> <Border Width="{Binding ElementName=redBorder, Path=ActualWidth}" Height="{Binding ElementName=redBorder, Path=ActualHeight}" Opacity="0.2" BorderBrush="Transparent" BorderThickness="4" Name="redRefelction" Visibility="Collapsed"> <Border.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset=".6" Color="Transparent"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.OpacityMask> <Border.Background> <VisualBrush Visual="{Binding ElementName=redButton}"> <VisualBrush.Transform> <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="52.5" CenterY="37.5" /> </VisualBrush.Transform> </VisualBrush> </Border.Background> </Border> </StackPanel> <StackPanel Name="blueStack" Grid.Row="0" Grid.Column="0" RenderTransformOrigin="0.5,0.5"> <StackPanel.RenderTransform> <ScaleTransform ScaleX="0"/> </StackPanel.RenderTransform> <Border Name="blueBorder" BorderBrush="Transparent" BorderThickness="4" Width="Auto" Height="Auto"> <Button Grid.Row="0" Grid.Column="1" Margin="0" Width="105" Background="Blue" Name="blueButton" Height="75"/> </Border> <Border Width="{Binding ElementName=blueBorder, Path=ActualWidth}" Height="{Binding ElementName=blueBorder, Path=ActualHeight}" Opacity="0.2" BorderBrush="Transparent" BorderThickness="4" Name="blueRefelction" Visibility="Collapsed"> <Border.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset=".6" Color="Transparent"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.OpacityMask> <Border.Background> <VisualBrush Visual="{Binding ElementName=blueButton}"> <VisualBrush.Transform> <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="52.5" CenterY="37.5" /> </VisualBrush.Transform> </VisualBrush> </Border.Background> </Border> </StackPanel> <Button Grid.Row="1" Click="FlipButton_Click" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76">Flip</Button> <Button Grid.Row="0" Grid.Column="1" Click="ReflectionButton_Click" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76">Reflection</Button> </Grid> </Window> Here are the button click handlers: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Windows.Media.Animation; namespace WpfFlipTest { public partial class Window1 : Window { public Window1() { InitializeComponent(); } bool flipped = false; private void FlipButton_Click(object sender, RoutedEventArgs e) { Storyboard sbFlip = (Storyboard)Resources["sbFlip"]; Storyboard sbFlipBack = (Storyboard)Resources["sbFlipBack"]; if (flipped) { sbFlipBack.Begin(); flipped = false; } else { sbFlip.Begin(); flipped = true; } } bool reflection = false; private void ReflectionButton_Click(object sender, RoutedEventArgs e) { if (reflection) { reflection = false; redRefelction.Visibility = Visibility.Collapsed; blueRefelction.Visibility = Visibility.Collapsed; } else { reflection = true; redRefelction.Visibility = Visibility.Visible; blueRefelction.Visibility = Visibility.Visible; } } } } UPDATE: I have been testing this some more to try to find out what is causing the issue I am seeing and I believe I found what is causing the issue. Below I have pasted new xaml and code-behind. The new sample below is very similar to the original sample, with a few minor modifications. The xaml basically consists of two stack panels, each containing two borders. The second border in each stack panel is a visual brush (a reflection of the border above it). Now, when I click the "Flip" button, one stack panel gets its ScaleX reduced to zero, while the second stack panel, whose initial ScaleX is zero, gets its ScaleX increased to 1. This animation gives the illusion of flipping. There are also two textblocks which display the scale factor of each stack panel. I added those to try to diagnose my issue. The issue is (as described in the oringal post) that the flipping animation is not smooth. Every time I hit the flip button, the animation starts but whenever the ScaleX factor gets to around .14 to .16, the animation looks like it stalls and the stack panels never have there ScaleX reduced to zero, so they never totally disappear. Now, the strange thing is that if I change the Width/Height properties of the "frontBorder" and "backBorder" borders defined below to use explict values instead of Auto, such as Width=105 and Height=75 (to match the button in the border) everything works fine. The animation stutters the first two or three times I run it but after that the flips are smooth and flawless. (BTW, when an animation is run for the first time, is there something going on in the background, some sort of initialization, that causes it to be a little slow the first time?) Is it possible that the Auto Width/Height of the borders are causing the issue? I can reproduce it everytime but I am not sure why Auto Width/Height would be a problem. Below is the sample. Thanks for the help. <Window x:Class="FlipTest.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="Window1" Height="300" Width="300"> <Window.Resources> <Storyboard x:Key="sbFlip"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="front" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.5" Storyboard.TargetName="back" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> <Storyboard x:Key="sbFlipBack"> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="back" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="0"/> </DoubleAnimationUsingKeyFrames> <DoubleAnimationUsingKeyFrames BeginTime="00:00:00.5" Storyboard.TargetName="front" Storyboard.TargetProperty="(UIElement.RenderTransform).(ScaleTransform.ScaleX)"> <SplineDoubleKeyFrame KeyTime="00:00:00.5" Value="1"/> </DoubleAnimationUsingKeyFrames> </Storyboard> </Window.Resources> <Grid x:Name="LayoutRoot" Background="White" ShowGridLines="True"> <Grid.RowDefinitions> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> <RowDefinition Height="Auto"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="Auto"/> <ColumnDefinition Width="Auto"/> </Grid.ColumnDefinitions> <StackPanel x:Name="front" RenderTransformOrigin="0.5,0.5"> <StackPanel.RenderTransform> <ScaleTransform/> </StackPanel.RenderTransform> <Border Name="frontBorder" BorderBrush="Yellow" BorderThickness="2" Width="Auto" Height="Auto"> <Button Margin="0" Name="redButton" Height="75" Background="Red" Width="105" Click="FlipButton_Click"/> </Border> <Border Width="{Binding ElementName=frontBorder, Path=ActualWidth}" Height="{Binding ElementName=frontBorder, Path=ActualHeight}" Opacity="0.2" BorderBrush="Transparent"> <Border.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset=".6" Color="Transparent"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.OpacityMask> <Border.Background> <VisualBrush Visual="{Binding ElementName=frontBorder}"> <VisualBrush.Transform> <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="52.5" CenterY="37.5" /> </VisualBrush.Transform> </VisualBrush> </Border.Background> </Border> </StackPanel> <StackPanel x:Name="back" RenderTransformOrigin="0.5,0.5"> <StackPanel.RenderTransform> <ScaleTransform ScaleX="0"/> </StackPanel.RenderTransform> <Border Name="backBorder" BorderBrush="Yellow" BorderThickness="2" Width="Auto" Height="Auto"> <Button Margin="0" Width="105" Background="Blue" Name="blueButton" Height="75" Click="FlipButton_Click"/> </Border> <Border Width="{Binding ElementName=backBorder, Path=ActualWidth}" Height="{Binding ElementName=backBorder, Path=ActualHeight}" Opacity="0.2" BorderBrush="Transparent"> <Border.OpacityMask> <LinearGradientBrush StartPoint="0,0" EndPoint="0,1"> <LinearGradientBrush.GradientStops> <GradientStop Offset="0" Color="Black"/> <GradientStop Offset=".6" Color="Transparent"/> </LinearGradientBrush.GradientStops> </LinearGradientBrush> </Border.OpacityMask> <Border.Background> <VisualBrush Visual="{Binding ElementName=backBorder}"> <VisualBrush.Transform> <ScaleTransform ScaleX="1" ScaleY="-1" CenterX="52.5" CenterY="37.5" /> </VisualBrush.Transform> </VisualBrush> </Border.Background> </Border> </StackPanel> <Button Grid.Row="1" Click="FlipButton_Click" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76">Flip</Button> <TextBlock Grid.Row="2" Grid.Column="0" Foreground="DarkRed" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76" Text="{Binding ElementName=front, Path=(UIElement.RenderTransform).(ScaleTransform.ScaleX)}"/> <TextBlock Grid.Row="3" Grid.Column="0" Foreground="DarkBlue" Height="19.45" HorizontalAlignment="Left" VerticalAlignment="Top" Width="76" Text="{Binding ElementName=back, Path=(UIElement.RenderTransform).(ScaleTransform.ScaleX)}"/> </Grid> </Window> Code-behind: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Imaging; using System.Windows.Navigation; using System.Windows.Shapes; using System.Windows.Media.Animation; namespace FlipTest { /// <summary> /// Interaction logic for Window1.xaml /// </summary> public partial class Window1 : Window { public Window1() { InitializeComponent(); } bool flipped = false; private void FlipButton_Click(object sender, RoutedEventArgs e) { Storyboard sbFlip = (Storyboard)Resources["sbFlip"]; Storyboard sbFlipBack = (Storyboard)Resources["sbFlipBack"]; if (flipped) { sbFlipBack.Begin(); flipped = false; } else { sbFlip.Begin(); flipped = true; } } } }

Read the article
iPhone SDK vs Windows Phone 7 Series SDK Challenge, Part 1: Hello World!

In this series, I will be taking sample applications from the iPhone SDK and implementing them on Windows Phone 7 Series. My goal is to do as much of an apples-to-apples comparison as I can. This series will be written to not only compare and contrast how easy or difficult it is to complete tasks on either platform, how many lines of code, etc., but Id also like it to be a way for iPhone developers to either get started on Windows Phone 7 Series development, or for developers in general to learn the platform. Heres my methodology: Run the iPhone SDK app in the iPhone Simulator to get a feel for what it does and how it works, without looking at the implementation Implement the equivalent functionality on Windows Phone 7 Series using Silverlight. Compare the two implementations based on complexity, functionality, lines of code, number of files, etc. Add some functionality to the Windows Phone 7 Series app that shows off a way to make the scenario more interesting or leverages an aspect of the platform, or uses a better design pattern to implement the functionality. You can download Microsoft Visual Studio 2010 Express for Windows Phone CTP here, and the Expression Blend 4 Beta here. Hello World! Of course no first post would be allowed if it didnt focus on the hello world scenario. The iPhone SDK follows that tradition with the Your First iPhone Application walkthrough. I will say that the developer documentation for iPhone is pretty good. There are plenty of walkthoughs and they break things down into nicely sized steps and do a good job of bringing the user along. As expected, this application is quite simple. It comprises of a text box, a label, and a button. When you push the button, the label changes to Hello plus the word you typed into the text box. Makes perfect sense for a starter application. Theres not much to this but it covers a few basic elements: Laying out basic UI Handling user input Hooking up events Formatting text So, lets get started building a similar app for Windows Phone 7 Series! Implementing the UI: UI in Silverlight (and therefore Windows Phone 7) is defined in XAML, which is a declarative XML language also used by WPF on the desktop. For anyone thats familiar with similar types of markup, its relatively straightforward to learn, but has a lot of power in it once you get it figured out. Well talk more about that. This UI is very simple. When I look at this, I note a couple of things: Elements are arranged vertically They are all centered So, lets create our Application and then start with the UI. Once you have the the VS 2010 Express for Windows Phone tool running, create a new Windows Phone Project, and call it Hello World: Once created, youll see the designer on one side and your XAML on the other: Now, we can create our UI in one of three ways: Use the designer in Visual Studio to drag and drop the components Use the designer in Expression Blend 4 to drag and drop the components Enter the XAML by hand in either of the above Well start with (1), then kind of move to (3) just for instructional value. To develop this UI in the designer: First, delete all of the markup between inside of the Grid element (LayoutRoot). You should be left with just this XAML for your MainPage.xaml (i shortened all the xmlns declarations below for brevity): 1: <phoneNavigation:PhoneApplicationPage 2: x:Class="HelloWorld.MainPage" 3: xmlns="...[snip]" 4: FontFamily="{StaticResource PhoneFontFamilyNormal}" 5: FontSize="{StaticResource PhoneFontSizeNormal}" 6: Foreground="{StaticResource PhoneForegroundBrush}"> 7: 8: <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneBackgroundBrush}"> 9: 10: </Grid> 11: 12: </phoneNavigation:PhoneApplicationPage> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Well be adding XAML at line 9, so thats the important part. Now, Click on the center area of the phone surface Open the Toolbox and double click StackPanel Double click TextBox Double click TextBlock Double click Button That will create the necessary UI elements but they wont be arranged quite right. Well fix it in a second. Heres the XAML that we end up with: 1: <StackPanel Height="100" HorizontalAlignment="Left" Margin="10,10,0,0" Name="stackPanel1" VerticalAlignment="Top" Width="200"> 2: <TextBox Height="32" Name="textBox1" Text="TextBox" Width="100" /> 3: <TextBlock Height="23" Name="textBlock1" Text="TextBlock" /> 4: <Button Content="Button" Height="70" Name="button1" Width="160" /> 5: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } The designer does its best at guessing what we want, but in this case we want things to be a bit simpler. So well just clean it up a bit. We want the items to be centered and we want them to have a little bit of a margin on either side, so heres what we end up with. Ive also made it match the values and style from the iPhone app: 1: <StackPanel Margin="10"> 2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/> 3: <TextBlock Name="textBlock1" HorizontalAlignment="Center" Margin="0,100,0,0" Text="Hello You!" /> 4: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello"/> 5: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now lets take a look at what weve done there. Line 1: We removed all of the formatting from the StackPanel, except for Margin, as thats all we need. Since our parent element is a Grid, by default the StackPanel will be sized to fit in that space. The Margin says that we want to reserve 10 pixels on each side of the StackPanel. Line 2: Weve set the HorizontalAlignment of the TextBox to Stretch, which says that it should fill its parents size horizontally. We want to do this so the TextBox is always full-width. We also set TextAlignment to Center, to center the text. Line 3: In contrast to the TextBox above, we dont care how wide the TextBlock is, just so long as it is big enough for its text. Thatll happen automatically, so we just set its Horizontal alignment to Center. We also set a Margin above the TextBlock of 100 pixels to bump it down a bit, per the iPhone UI. Line 4: We do the same things here as in Line 3. Heres how the UI looks in the designer: Believe it or not, were almost done! Implementing the App Logic Now, we want the TextBlock to change its text when the Button is clicked. In the designer, double click the Button to be taken to the Event Handler for the Buttons Click event. In that event handler, we take the Text property from the TextBox, and format it into a string, then set it into the TextBlock. Thats it! 1: private void button1_Click(object sender, RoutedEventArgs e) 2: { 3: string name = textBox1.Text; 4: 5: // if there isn't a name set, just use "World" 6: if (String.IsNullOrEmpty(name)) 7: { 8: name = "World"; 9: } 10: 11: // set the value into the TextBlock 12: textBlock1.Text = String.Format("Hello {0}!", name); 13: 14: } .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } We use the String.Format() method to handle the formatting for us. Now all thats left is to test the app in the Windows Phone Emulator and verify it does what we think it does! And it does! Comparing against the iPhone Looking at the iPhone example, there are basically three things that you have to touch as the developer: 1) The UI in the Nib file 2) The app delegate 3) The view controller Counting lines is a bit tricky here, but to try to keep this even, Im going to only count lines of code that I could not have (or would not have) generated with the tooling. Meaning, Im not counting XAML and Im not counting operations that happen in the Nib file with the XCode designer tool. So in the case of the above, even though I modified the XAML, I could have done all of those operations using the visual designer tool. And normally I would have, but the XAML is more instructive (and less steps!). Im interested in things that I, as the developer have to figure out in code. Im also not counting lines that just have a curly brace on them, or lines that are generated for me (e.g. method names that are generated for me when I make a connection, etc.) So, by that count, heres what I get from the code listing for the iPhone app found here: HelloWorldAppDelegate.h: 6 HelloWorldAppDelegate.m: 12 MyViewController.h: 8 MyViewController.m: 18 Which gives me a grand total of about 44 lines of code on iPhone. I really do recommend looking at the iPhone code for a comparison to the above. Now, for the Windows Phone 7 Series application, the only code I typed was in the event handler above Main.Xaml.cs: 4 So a total of 4 lines of code on Windows Phone 7. And more importantly, the process is just A LOT simpler. For example, I was surprised that the User Interface Designer in XCode doesnt automatically create instance variables for me and wire them up to the corresponding elements. I assumed I wouldnt have to write this code myself (and risk getting it wrong!). I dont need to worry about view controllers or anything. I just write my code. This blog post up to this point has covered almost every aspect of this apps development in a few pages. The iPhone tutorial has 5 top level steps with 2-3 sub sections of each. Now, its worth pointing out that the iPhone development model uses the Model View Controller (MVC) pattern, which is a very flexible and powerful pattern that enforces proper separation of concerns. But its fairly complex and difficult to understand when you first walk up to it. Here at Microsoft weve dabbled in MVC a bit, with frameworks like MFC on Visual C++ and with the ASP.NET MVC framework now. Both are very powerful frameworks. But one of the reasons weve stayed away from MVC with client UI frameworks is that its difficult to tool. We havent seen the type of value that beats double click, write code! for the broad set of scenarios. Another thing to think about is how many of those lines of code were focused on my apps functionality?. Or, the converse of How many lines of code were boilerplate plumbing? In both examples, the actual number of functional code lines is similar. I count most of them in MyViewController.m, in the changeGreeting method. Its about 7 lines of code that do the work of taking the value from the TextBox and putting it into the label. Versus 4 on the Windows Phone 7 side. But, unfortunately, on iPhone I still have to write that other 37 lines of code, just to get there. 10% of the code, 1 file instead of 4, its just much simpler. Making Some Tweaks It turns out, I can actually do this application with ZERO lines of code, if Im willing to change the spec a bit. The data binding functionality in Silverlight is incredibly powerful. And what I can do is databind the TextBoxs value directly to the TextBlock. Take some time looking at this XAML below. Youll see that I have added another nested StackPanel and two more TextBlocks. Why? Because thats how I build that string, and the nested StackPanel will lay things out Horizontally for me, as specified by the Orientation property. 1: <StackPanel Margin="10"> 2: <TextBox Name="textBox1" HorizontalAlignment="Stretch" Text="You" TextAlignment="Center"/> 3: <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,100,0,0" > 4: <TextBlock Text="Hello " /> 5: <TextBlock Name="textBlock1" Text="{Binding ElementName=textBox1, Path=Text}" /> 6: <TextBlock Text="!" /> 7: </StackPanel> 8: <Button Name="button1" HorizontalAlignment="Center" Margin="0,150,0,0" Content="Hello" Click="button1_Click" /> 9: </StackPanel> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } Now, the real action is there in the bolded TextBlock.Text property: Text="{Binding ElementName=textBox1, Path=Text}" .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } That does all the heavy lifting. It sets up a databinding between the TextBox.Text property on textBox1 and the TextBlock.Text property on textBlock1. As I change the text of the TextBox, the label updates automatically. In fact, I dont even need the button any more, so I could get rid of that altogether. And no button means no event handler. No event handler means no C# code at all. Did you know that DotNetSlackers also publishes .net articles written by top known .net Authors? We already have over 80 articles in several categories including Silverlight. Take a look: here.

Read the article
How do I stop a routed event from triggering on specific places in XAML?

- by cfouche

I have the following situation: A stackpanel contains a number of elements, including some that are contained in a GroupBox. So something like this: <StackPanel x:Name="stackpanel" Background="White"> <TextBlock Text="TextBlock"/> <TextBlock Text="Another TextBlock"/>  <GroupBox Header="GroupBoxHeader"> <TextBlock Text="Text inside GroupBox"/> </GroupBox> </StackPanel> I want a MouseDown in the stackpanel to trigger some Storyboard, so I've added an EventTrigger, like this: <EventTrigger RoutedEvent="Mouse.MouseDown" SourceName="stackpanel"> <BeginStoryboard Storyboard="{StaticResource OnMouseDown1}"/> </EventTrigger> This is almost right, but the thing is - I don't want the MouseDown to be picked up by the GroupBox's header or border, only by its content. In other words, I want the Storyboard to begin when someone does a mousedown on anything inside the StackPanel, except GroupBox headers and borders. Is there some way of doing this? (I've tried setting e.Handled to true on the GroupBox, but then its content doesn't pick up the mousedown anymore either.)

Read the article
Nested AccordionItem. Inner AccordionItem do not expand.

- by Ali

In Silverlight an AccordionItem is inside another one . When the inner one is selected, it can not expand its parent more which is already expanded to show its own content. I tried to get around it by templating but I was unlucky. Does any one has a solution for it [prefer a solution without code]? <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:layoutPrimitivesToolkit="clr-namespace:System.Windows.Controls.Primitives;assembly=System.Windows.Controls.Layout.Toolkit" xmlns:layoutToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Layout.Toolkit" xmlns:controlsToolkit="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Toolkit" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="NestedAccordion_Silverlight.MainPage" Width="640" Height="480"> <Grid x:Name="LayoutRoot" Background="White"> <layoutToolkit:Accordion BorderBrush="#FF00FF53" SelectionMode="ZeroOrMore"> <layoutToolkit:AccordionItem Header="Header" VerticalAlignment="Top" > <StackPanel VerticalAlignment="Top"> <TextBlock TextWrapping="Wrap" Text="Some content"/> <Button Content="Button" Width="75"/> <layoutToolkit:AccordionItem Header="Inner Accordion1" VerticalAlignment="Top" > <StackPanel VerticalAlignment="Top"> <TextBlock TextWrapping="Wrap" Text="Some content"/> <Button Content="Button" Width="75"/> </StackPanel> </layoutToolkit:AccordionItem> </StackPanel> </layoutToolkit:AccordionItem> <layoutToolkit:AccordionItem Header="Header" VerticalAlignment="Top" > <StackPanel> <TextBlock TextWrapping="Wrap" Text="Some content"/> <Button Content="Button" Width="75"/> </StackPanel> </layoutToolkit:AccordionItem> <layoutToolkit:AccordionItem Header="Header" VerticalAlignment="Top" > <StackPanel> <TextBlock TextWrapping="Wrap" Text="Some content"/> <Button Content="Button" Width="75"/> </StackPanel> </layoutToolkit:AccordionItem> </layoutToolkit:Accordion> </Grid> Is it a bug or I am in a wrong path?

Read the article
Can't cast treeviewitem as treeviewitem in wpf

- by phenevo

Hi, I've got webservice asmx, and there are classes: Country public string Name {get;set;} public string Code {get;set;} public List<Area> Areas {get;set;} Area public string Name {get;set;} public string Code {get;set;} public List<Regions> Provinces {get;set;} Provinces public string Name {get;set;} public string Code {get;set;} I bind it to mz TreeView WPF: Country[] items = new MyService().GetListOfCountries(); structureTree.ItemsSource = items; Code of myTree: <UserControl x:Class="ObjectsAndZonesSimpleTree" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" <Grid> <StackPanel Name="stackPanel1"> <GroupBox Header="Choose" Height="354" Name="groupBox1" Width="Auto"> <TreeView Name="structureTree" SelectedItemChanged="structureTree_SelectedItemChanged" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}" Height="334" ScrollViewer.VerticalScrollBarVisibility="Visible" ScrollViewer.HorizontalScrollBarVisibility="Visible" Width="Auto" PreviewMouseRightButtonUp="structureTree_PreviewMouseRightButtonUp" FontFamily="Verdana" FontSize="12" BorderThickness="1" MinHeight="0" Padding="1" Cursor="Hand" Margin="-1"> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type MyService:Country}" ItemsSource="{Binding Path=ListOfRegions}"> <StackPanel Orientation="Horizontal"> <TextBlock TextAlignment="Justify" VerticalAlignment="Center" Text="{Binding Path=Name}"/> </StackPanel> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type MyService:Region}" ItemsSource="{Binding Path=Provinces}"> <StackPanel Orientation="Horizontal"> <TextBlock TextAlignment="Justify" VerticalAlignment="Center" Text="{Binding Path=Name}"/> </StackPanel> </HierarchicalDataTemplate> <DataTemplate DataType="{x:Type MyService:Province}" ItemsSource="{Binding Path=ListOfCities}"> <StackPanel Orientation="Horizontal"> <TextBlock TextAlignment="Justify" VerticalAlignment="Center" Text="{Binding Path=Name}"/> </StackPanel> </DataTemplate> </TreeView.Resources> </TreeView> </GroupBox> </StackPanel> </Grid> </UserControl> This gives me null: private void structureTree_SelectedItemChanged(object sender, RoutedPropertyChangedEventArgs<object> e) { TreeViewItem treeViewItem = structureTree.SelectedItem as TreeViewItem; }

Read the article
Modelling a checkable treeview in the MVVM model

- by Stephen Stranded

Hi, I am trying to create a checkable treeview control to list hierarchical data but it does not seem to work. I used the MVVM model example used by in codeplex simplified Treeview using ViewModel but it shows nothing. Here is my code. Please help. I am a newbie to WPF and the MVVM model but i very much want to use it in an urgent application. </UserControl.Resources> <Grid> <StackPanel Height="166"> <TextBlock Text="Please Display this" /> <TreeView ItemsSource="{Binding Classifications}" Height="141"> <TreeView.ItemContainerStyle>  <Style TargetType="{x:Type TreeViewItem}"> <Setter Property="IsExpanded" Value="{Binding IsExpanded, Mode=TwoWay}" /> <Setter Property="IsSelected" Value="{Binding IsSelected, Mode=TwoWay}" /> <Setter Property="FontWeight" Value="Normal" /> <Style.Triggers> <Trigger Property="IsSelected" Value="True"> <Setter Property="FontWeight" Value="Bold" /> </Trigger> </Style.Triggers> </Style> </TreeView.ItemContainerStyle> <TreeView.Resources> <HierarchicalDataTemplate DataType="{x:Type local:PropertyTypeViewModel}" ItemsSource="{Binding Children}"> <StackPanel Orientation="Horizontal"> <CheckBox Focusable="false" IsChecked="{Binding isSelected}"></CheckBox> <TextBlock Text="{Binding Classification}" /> </StackPanel> </HierarchicalDataTemplate> <HierarchicalDataTemplate DataType="{x:Type local:PropertyViewModel}" ItemsSource="{Binding Children}" > <StackPanel Orientation="Horizontal"> <CheckBox Focusable="false" IsChecked="{Binding isSelected}"></CheckBox> <TextBlock Text="{Binding PropertyName}" /> </StackPanel> </HierarchicalDataTemplate> <DataTemplate DataType="{x:Type local:LeaseViewModel}"> <StackPanel Orientation="Horizontal"> <CheckBox Focusable="false" IsChecked="{Binding isSelected}"></CheckBox> <TextBlock Text="{Binding TenantName}" /> </StackPanel> </DataTemplate> </TreeView.Resources> </TreeView> </StackPanel> </Grid>

Read the article
Wpf Listbox and Togglebutton

- by Tan

Hi iam using a listbox to show a list of items. in the listbox i ahve an togglebutton on every item. When i click on the toggle button the state of the togglebutton is pressed. But when i am scrolling down in the listbox and scolls up again. The togglebutton state is not pressed. How can i prevent this please help. Heres my itemtemplate <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,3,0,0"> <Border BorderBrush="Black" BorderThickness="1,1,1,1"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox"> <GradientStop Color="#FFECECEC" Offset="1"/> <GradientStop Color="#FFE8E8E8"/> <GradientStop Color="#FFBDBDBD" Offset="0.153"/> <GradientStop Color="#FFE8E8E8" Offset="0.904"/> </LinearGradientBrush> </Border.Background> <Border.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}" Value="True"> <Setter Property="Border.Height" Value="100"/> <Setter Property="Border.Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox"> <GradientStop Color="DarkGray" Offset="1"/> <GradientStop Color="#FFE8E8E8"/> <GradientStop Color="#FFBDBDBD" Offset="0.153"/> <GradientStop Color="DarkGray" Offset="0.904"/> </LinearGradientBrush> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="500"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="55"/> </Grid.ColumnDefinitions>  <StackPanel Grid.Column="0" VerticalAlignment="Center" Orientation="Vertical"> <TextBlock Text="{Binding Path=FtgNamn}" FontWeight="Bold" FontSize="22pt" FontFamily="Calibri"/> <TextBlock Text="{Binding Path=LevsAttBeskr}" FontSize="18pt" FontFamily="Calibri"/> </StackPanel>  <StackPanel Grid.Column="1" VerticalAlignment="Center"> <TextBlock Text="{Binding Path=Antal}" FontSize="44pt" FontFamily="Calibri"/> </StackPanel>  <StackPanel Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"> <ToggleButton Name="Check" Width="40" Height="40" Click="Check_Click" Tag="{Binding Path=Plocklista}"> <ToggleButton.Style> <Style TargetType="ToggleButton"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Border x:Name="InnerBorder" Background="White" BorderBrush="Black" BorderThickness="1"/> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="InnerBorder" Property="Background"> <Setter.Value> <ImageBrush ImageSource="/Images/button_ok.png"/> </Setter.Value> </Setter> <Setter TargetName="InnerBorder" Property="BorderThickness" Value="0"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ToggleButton.Style> </ToggleButton> </StackPanel> </Grid> <Border BorderBrush="Darkgray" BorderThickness="0,0,1,0"> </Border> <TextBlock Width="100" Text="{Binding Path=Quantity}" FontSize="44pt" FontFamily="Calibri"/> <CheckBox Width="78"/> </StackPanel> </Border> </StackPanel> </DataTemplate>

Read the article
WPF Some styles not applied on DataTemplate controls

- by Martin

Hi, I am trying to learn something about WPF and I am quite amazed by its flexibility. However, I have hit a problem with Styles and DataTemplates, which is little bit confusing. I have defined below test page to play around a bit with styles etc and found that the Styles defined in <Page.Resources> for Border and TextBlock are not applied in the DataTemplate, but Style for ProgressBar defined in exactly the same way is applied. Source code (I just use Kaxaml and XamlPadX to view the result) <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Page.Resources> <Style TargetType="{x:Type Border}"> <Setter Property="Background" Value="SkyBlue"/> <Setter Property="BorderBrush" Value="Black"/> <Setter Property="BorderThickness" Value="2"/> <Setter Property="CornerRadius" Value="5"/> </Style> <Style TargetType="{x:Type TextBlock}"> <Setter Property="FontWeight" Value="Bold"/> </Style> <Style TargetType="{x:Type ProgressBar}"> <Setter Property="Height" Value="10"/> <Setter Property="Width" Value="100"/> <Setter Property="Foreground" Value="Red"/> </Style> <XmlDataProvider x:Key="TestData" XPath="/TestData"> <x:XData> <TestData xmlns=""> <TestElement> <Name>Item 1</Name> <Value>25</Value> </TestElement> <TestElement> <Name>Item 2</Name> <Value>50</Value> </TestElement> </TestData> </x:XData> </XmlDataProvider> <HierarchicalDataTemplate DataType="TestElement"> <Border Height="45" Width="120" Margin="5,5"> <StackPanel Orientation="Vertical" Margin="5,5" VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock HorizontalAlignment="Center" Text="{Binding XPath=Name}"/> <ProgressBar Value="{Binding XPath=Value}"/> </StackPanel> </Border> </HierarchicalDataTemplate> </Page.Resources> <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" VerticalAlignment="Center"> <StackPanel Orientation="Vertical" VerticalAlignment="Center"> <Border Height="45" Width="120" Margin="5,5"> <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock HorizontalAlignment="Center" Text="Item 1"/> <ProgressBar Value="25"/> </StackPanel> </Border> <Border Height="45" Width="120" Margin="5,5"> <StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center"> <TextBlock HorizontalAlignment="Center" Text="Item 2"/> <ProgressBar Value="50"/> </StackPanel> </Border> </StackPanel> <ListBox Margin="10,10" Width="140" ItemsSource="{Binding Source={StaticResource TestData}, XPath=TestElement}"/> </StackPanel> </Page> I suspect it has something to do with default styles etc, but more puzzling is why some Styles are applied and some not. I cannot find an easy explanation for above anywhere and thus would like to ask if someone would be kind enough to explain this behaviour in lamens' terms with possible links to technical description, i.e. to MSDN or so. Thanks in advance for you support!

Read the article
Wpf Listbox and CheckBox

- by Tan

Hi iam using a listbox to show a list of items. in the listbox i ahve an togglebutton on every item. When i click on the toggle button the state of the togglebutton is pressed. But when i am scrolling down in the listbox and scolls up again. The togglebutton state is not pressed. How can i prevent this please help. Heres my itemtemplate <ListBox.ItemTemplate> <DataTemplate> <StackPanel Margin="0,3,0,0"> <Border BorderBrush="Black" BorderThickness="1,1,1,1"> <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox"> <GradientStop Color="#FFECECEC" Offset="1"/> <GradientStop Color="#FFE8E8E8"/> <GradientStop Color="#FFBDBDBD" Offset="0.153"/> <GradientStop Color="#FFE8E8E8" Offset="0.904"/> </LinearGradientBrush> </Border.Background> <Border.Style> <Style> <Style.Triggers> <DataTrigger Binding="{Binding Path=IsSelected, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType={x:Type ListBoxItem}}}" Value="True"> <Setter Property="Border.Height" Value="100"/> <Setter Property="Border.Background"> <Setter.Value> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" MappingMode="RelativeToBoundingBox"> <GradientStop Color="DarkGray" Offset="1"/> <GradientStop Color="#FFE8E8E8"/> <GradientStop Color="#FFBDBDBD" Offset="0.153"/> <GradientStop Color="DarkGray" Offset="0.904"/> </LinearGradientBrush> </Setter.Value> </Setter> </DataTrigger> </Style.Triggers> </Style> </Border.Style> <StackPanel Orientation="Horizontal" VerticalAlignment="Center"> <Grid> <Grid.ColumnDefinitions> <ColumnDefinition Width="500"/> <ColumnDefinition Width="100"/> <ColumnDefinition Width="55"/> </Grid.ColumnDefinitions>  <StackPanel Grid.Column="0" VerticalAlignment="Center" Orientation="Vertical"> <TextBlock Text="{Binding Path=FtgNamn}" FontWeight="Bold" FontSize="22pt" FontFamily="Calibri"/> <TextBlock Text="{Binding Path=LevsAttBeskr}" FontSize="18pt" FontFamily="Calibri"/> </StackPanel>  <StackPanel Grid.Column="1" VerticalAlignment="Center"> <TextBlock Text="{Binding Path=Antal}" FontSize="44pt" FontFamily="Calibri"/> </StackPanel>  <StackPanel Grid.Column="2" VerticalAlignment="Center" HorizontalAlignment="Center"> <ToggleButton Name="Check" Width="40" Height="40" Click="Check_Click" Tag="{Binding Path=Plocklista}"> <ToggleButton.Style> <Style TargetType="ToggleButton"> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type ToggleButton}"> <Border x:Name="InnerBorder" Background="White" BorderBrush="Black" BorderThickness="1"/> <ControlTemplate.Triggers> <Trigger Property="IsChecked" Value="True"> <Setter TargetName="InnerBorder" Property="Background"> <Setter.Value> <ImageBrush ImageSource="/Images/button_ok.png"/> </Setter.Value> </Setter> <Setter TargetName="InnerBorder" Property="BorderThickness" Value="0"/> </Trigger> </ControlTemplate.Triggers> </ControlTemplate> </Setter.Value> </Setter> </Style> </ToggleButton.Style> </ToggleButton> </StackPanel> </Grid> <Border BorderBrush="Darkgray" BorderThickness="0,0,1,0"> </Border> <TextBlock Width="100" Text="{Binding Path=Quantity}" FontSize="44pt" FontFamily="Calibri"/> <CheckBox Width="78"/> </StackPanel> </Border> </StackPanel> </DataTemplate>

Read the article
SL 3 navigation not working!

- by Silver Gun

Hey Guys I converted all my existing Silverlight app UserControls to Pages so I could use the Navigation Framework. Anyway so I created a UserControl called MyFrame, which would host all the pages. In my App.xaml.cs I have the following to make sure that MyFrame is loaded when the App loads: private void Application_Startup(object sender, StartupEventArgs e) { this.RootVisual = new MyFrame(); } My UriMapper class resides in App.xaml and looks like the following: <navcore:UriMapper x:Key="uriMapper"> <navcore:UriMapping Uri="Login" MappedUri="Login.xaml"> </navcore:UriMapper> Within my 'MyFrame' class, I have the following <StackPanel Orientation="Horizontal"> <StackPanel Orientation="Vertical"> <HyperlinkButton Tag="Login" Content="Login" Click="HyperlinkButton_Click" /> </StackPanel> <StackPanel Orientation="Vertical"> <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" /> </StackPanel> </StackPanel> And within the callback for my HyperlinkButton's event handler, I have the following: private void HyperlinkButton_Click(object sender, RoutedEventArgs e) { ContentFrame.Navigate(new Uri((sender as HyperlinkButton).Tag.ToString(), UriKind.Relative)); } The Login.xaml file is in my root folder (right under Project). This navigation does not seem to work! The exception I get reads like so: Navigation is only supported to relative URIs that are fragments, or begin with '/', or which contain ';component/'. Parameter name: uri The Login page does not load. There is no problem with Login.xaml as when I set this.RootVisual = new Login(); the page loads just fine. I also tried setting the NavigateUri attribute of the HyperlinkButton to "Login." No cigar. I'll appreciate any help! Thanks a lot in advance

Read the article
databind the Source property of the WebBrowser in WPF

- by Russ

Does anyone know how to databind the .Source property of the WebBrowser in WPF ( 3.5SP1 )? I have a listview that I want to have a small WebBrowser on the left, and content on the right, and to databind the source of each WebBrowser with the URI in each object bound to the list item. This is what I have as a proof of concept so far, but the "<WebBrowser Source="{Binding Path=WebAddress}"" does not compile. <DataTemplate x:Key="dealerLocatorLayout" DataType="DealerLocatorAddress"> <StackPanel Orientation="Horizontal">  <WebBrowser Source="{Binding Path=WebAddress}" ScrollViewer.HorizontalScrollBarVisibility="Disabled" ScrollViewer.VerticalScrollBarVisibility="Disabled" Width="300" Height="200" /> <StackPanel Orientation="Vertical"> <StackPanel Orientation="Horizontal"> <Label Content="{Binding Path=CompanyName}" FontWeight="Bold" Foreground="Blue" /> <TextBox Text="{Binding Path=DisplayName}" FontWeight="Bold" /> </StackPanel> <TextBox Text="{Binding Path=Street[0]}" /> <TextBox Text="{Binding Path=Street[1]}" /> <TextBox Text="{Binding Path=PhoneNumber}"/> <TextBox Text="{Binding Path=FaxNumber}"/> <TextBox Text="{Binding Path=Email}"/> <TextBox Text="{Binding Path=WebAddress}"/> </StackPanel> </StackPanel> </DataTemplate>

Read the article
How to use ContentPresenter on Window?

- by mybrokengnome

I've got a ResourceDictionary file that contains a bunch of resources to define elements of my UI. Including one for my DialogWindows, which will just be Windows. <Style x:Key="DialogWindow" TargetType="{x:Type Window}" > <Setter Property="OverridesDefaultStyle" Value="True"/> <Setter Property="WindowStyle" Value="None" /> <Setter Property="Template"> <Setter.Value> <ControlTemplate TargetType="{x:Type Window}"> <Grid Background="{StaticResource SunkenBackground}"> <StackPanel Margin="20,20,20,20" Background="{StaticResource SunkenBackground}"> <AdornerDecorator> <ContentPresenter/> </AdornerDecorator> </StackPanel> </Grid> </ControlTemplate> </Setter.Value> </Setter> </Style> As you can see every DialogWindow should have a grid and a stackpanel, and then the content goes inside there. I've added the file to my App.xaml, and on one of my dialog windows I added Style="{StaticResource DialogWindow}". So the question is: Now that I have my Template set up for a window, and things are actually styled properly once I've added the StaticResource, what tags do I use to wrap my content in inside of my DialogWindow? I tried wrapping them inside Grid, but that just breaks the layout. If I wrap them inside a StackPanel, they look correct, but then I've got 2 StackPanels and a Grid, when if I didn't include the template I could just have 1 StackPanel and a Grid (I realize I could just take the stackpanel out of the template and do it for every DialogWindow, but that doesn't seem like a good solution). Thanks!

Read the article
WPF Combobox binding: can't change selection.

- by SteveCav

After wasting hours on this, following on the heels of my Last Problem, I'm starting to feel that Framework 4 is a master of subtle evil, or my PC is haunted. I have three comboboxes and a textbox on a WPF form, and I have an out-of-the-box Subsonic 3 ActiveRecord DAL. When I load this "edit record" form, the comboboxes fill correctly, they select the correct items, and the textbox has the correct text. I can change the TextBox text and save the record just fine, but the comboboxes CANNOT BE CHANGED. The lists drop down and highlight, but when you click on an item, the item selected stays the same. Here's my XAML: <StackPanel Orientation="Horizontal" Margin="10,10,0,0"> <TextBlock Width="80">Asset</TextBlock> <ComboBox Name="cboAsset" Width="180" DisplayMemberPath="AssetName" SelectedValuePath="AssetID" SelectedValue="{Binding AssetID}" ></ComboBox> </StackPanel> <StackPanel Orientation="Horizontal" Margin="10,10,0,0"> <TextBlock Width="80">Status</TextBlock> <ComboBox Name="cboStatus" Width="180" DisplayMemberPath="JobStatusDesc" SelectedValuePath="JobStatusID" SelectedValue="{Binding JobStatusID}" ></ComboBox> </StackPanel> <StackPanel Orientation="Horizontal" Margin="10,10,0,0"> <TextBlock Width="80">Category</TextBlock> <ComboBox Name="cboCategories" Width="180" DisplayMemberPath="CategoryName" SelectedValuePath="JobCategoryID" SelectedValue="{Binding JobCategoryID}" ></ComboBox> </StackPanel> <StackPanel Orientation="Horizontal" Margin="10,10,0,0"> <TextBlock Width="80">Reason</TextBlock> <TextBox Name="txtReason" Width="380" Text="{Binding Reason}"/> </StackPanel> Here are the relevant snips of my code (intJobID is passed in): SvcMgrDAL.Job oJob; IQueryable<SvcMgrDAL.JobCategory> oCategories = SvcMgrDAL.JobCategory.All().OrderBy(x => x.CategoryName); IQueryable<SvcMgrDAL.Asset> oAssets = SvcMgrDAL.Asset.All().OrderBy(x => x.AssetName); IQueryable<SvcMgrDAL.JobStatus> oStatus = SvcMgrDAL.JobStatus.All(); cboCategories.ItemsSource = oCategories; cboStatus.ItemsSource = oStatus; cboAsset.ItemsSource = oAssets; this.JobID = intJobID; oJob = SvcMgrDAL.Job.SingleOrDefault(x => x.JobID == intJobID); this.DataContext = oJob; Things I've tried: -Explicitly setting IsReadOnly="false" and IsSynchronizedWithCurrentItem="True" -Changing the combobox ItemSources from IQueryables to Lists. -Building my own Job object (plain vanilla entity class). -Every binding mode for the comboboxes. The Subsonic DAL doesn't implement INotifyPropertyChanged, but I don't see as it'd need to for simple binding like this. I just want to be able to pick something from the dropdown and save it. Comparing it with my last problem (link at the top of this message), I seem to have something really wierd with data sources going on. Maybe it's a Subsonic thing?

Read the article
strange sqares like hints in Silverlight application?

- by lina

Good day! Strange square appears on mouse hover on text boxes, buttons, etc (something like hint) in a silverlight navigation application - how can I remove it? a scrin shot an example .xaml page: <Code:BasePage x:Class="CAP.Views.Main" 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" mc:Ignorable="d" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:Code="clr-namespace:CAP.Code" d:DesignWidth="640" d:DesignHeight="480" Title="?????? ??????? ???????? ??? ?????"> <Grid x:Name="LayoutRoot"> <Grid.RowDefinitions> <RowDefinition Height="103*" /> <RowDefinition Height="377*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="120*" /> <ColumnDefinition Width="520*" /> </Grid.ColumnDefinitions> <Image Height="85" HorizontalAlignment="Left" Name="image1" Stretch="Fill" VerticalAlignment="Top" Width="84" Margin="12,0,0,0" ImageFailed="image1_ImageFailed" Source="/CAP;component/Images/My-Computer.png" /> <TextBlock Grid.Column="1" Height="Auto" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="0,12,0,0" Name="textBlock1" Text="Good day!" VerticalAlignment="Top" FontFamily="Verdana" FontSize="16" Width="345" FontWeight="Bold" /> <TextBlock Grid.Column="1" Grid.Row="1" TextWrapping="Wrap" Height="299" HorizontalAlignment="Left" Name="textBlock2" VerticalAlignment="Top" FontFamily="Verdana" FontSize="14" Width="441" > <Run Text="Some text "/><LineBreak/><LineBreak/><Run Text="and so on"/> <LineBreak/> </TextBlock> </Grid> xaml.cs: using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using System.Windows.Navigation; using CAP.Code; namespace CAP.Views { public partial class Main : BasePage { public Main() : base() { InitializeComponent(); MapBuilder.AddToMap(new SiteMapUnit() { Caption = "???????", RelativeUrl = "Main" },true); ((App)Application.Current).Mainpage.tvMainMenu.SelectedItems.Clear(); } // Executes when the user navigates to this page. protected override void OnNavigatedTo(NavigationEventArgs e) { } private void image1_ImageFailed(object sender, ExceptionRoutedEventArgs e) { } protected override string[] NeededPermission() { return new string[0]; } } } MainPage.xaml <UserControl x:Class="CAP.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:Code="clr-namespace:CAP.Code" xmlns:navigation="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Navigation" xmlns:uriMapper="clr-namespace:System.Windows.Navigation;assembly=System.Windows.Controls.Navigation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls" xmlns:telerikNavigation="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Navigation" mc:Ignorable="d" Margin="0,0,0,0" Width="auto" Height="auto" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input"> <ScrollViewer Width="auto" Height="auto" BorderBrush="White" BorderThickness="0" Margin="0,0,0,0" x:Name="sV" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" > <ScrollViewer.Content> <Grid Width="auto" Height="auto" x:Name="LayoutRoot" Style="{StaticResource LayoutRootGridStyle}" Margin="0,0,0,0"> <StackPanel Width="auto" Height="auto" Orientation="Vertical" Margin="250,0,0,50"> <Border x:Name="ContentBorder2" Margin="0,0,0,0" >  <StackPanel Orientation="Vertical" Height="82" Width="Auto" HorizontalAlignment="Right" Margin="0,0,0,0" DataContext="{Binding}"> <TextBlock HorizontalAlignment="Right" Foreground="White" x:Name="ApplicationNameTextBlock4" Style="{StaticResource ApplicationNameStyle}" FontSize="20" Text="?????? ???????" Margin="20,16,20,0"/> <StackPanel Orientation="Horizontal" HorizontalAlignment="Right"> <Image x:Name="imDoor" Visibility="Collapsed" MouseEnter="imDoor_MouseEnter" MouseLeave="imDoor_MouseLeave" Height="24" Stretch="Fill" Width="25" Margin="10,0,10,0" Source="/CAP;component/Images/sm_white_doors.png" MouseLeftButtonDown="bTest_Click" /> <TextBlock x:Name="bLogout" MouseEnter="bLogout_MouseEnter" MouseLeave="bLogout_MouseLeave" TextDecorations="Underline" Margin="0,6,20,4" Height="23" Text="?????" HorizontalAlignment="Right" Visibility="Collapsed" MouseLeftButtonDown="bTest_Click" FontFamily="Verdana" FontSize="13" FontWeight="Normal" Foreground="#FF1C1C92" /> </StackPanel> </StackPanel> </Border> <Border x:Name="bSiteMap" Margin="0,0,0,0" > <StackPanel x:Name="spSiteMap" Orientation="Horizontal" Height="20" Width="Auto" HorizontalAlignment="Left" Margin="0,0,0,0" DataContext="{Binding}">  </StackPanel> </Border> <Border Width="auto" Height="auto" x:Name="ContentBorder" Margin="0,0,0,0" > <navigation:Frame x:Name="ContentFrame" Style="{StaticResource ContentFrameStyle}" Source="Main" Navigated="ContentFrame_Navigated" NavigationFailed="ContentFrame_NavigationFailed" ToolTipService.ToolTip=" " Margin="0,0,0,0"> <navigation:Frame.UriMapper> <uriMapper:UriMapper>  <uriMapper:UriMapping Uri="RegistrateClient" MappedUri="/Views/Client/RegistrateClient.xaml"/>  </uriMapper:UriMapper> </navigation:Frame.UriMapper> </navigation:Frame> </Border> </StackPanel> <Grid x:Name="NavigationGrid" Style="{StaticResource NavigationGridStyle}" Margin="0,0,0,0" Background="{x:Null}" > <StackPanel Orientation="Vertical" Height="Auto" Width="250" HorizontalAlignment="Center" Margin="0,0,0,50" DataContext="{Binding}"> <Image Width="150" Height="90" HorizontalAlignment="Center" VerticalAlignment="Top" Source="/CAP;component/Images/logo__au.png" Margin="0,20,0,70"/> <Border x:Name="BrandingBorder" MinHeight="222" Width="250" Style="{StaticResource BrandingBorderStyle3}" HorizontalAlignment="Center" Opacity="60" Margin="0,0,0,0"> <Border.Background> <ImageBrush ImageSource="/CAP;component/Images/papka.png"/> </Border.Background> <Grid Width="250" x:Name="LichniyCabinet" Margin="0,10,0,0" HorizontalAlignment="Center" Height="211"> <Grid.ColumnDefinitions> <ColumnDefinition Width="19*" /> <ColumnDefinition Width="62*" /> <ColumnDefinition Width="151*" /> <ColumnDefinition Width="18*" /> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="13" /> <RowDefinition Height="24" /> <RowDefinition Height="35" /> <RowDefinition Height="35" /> <RowDefinition Height="43" /> <RowDefinition Height="28" /> <RowDefinition Height="32*" /> </Grid.RowDefinitions> <TextBlock Visibility="Visible" Grid.Row="2" Height="23" HorizontalAlignment="Left" x:Name="tLogin" Text="?????" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" Foreground="White" Margin="1,0,0,0" Grid.Column="1" /> <TextBlock Visibility="Visible" FontFamily="Verdana" FontSize="13" Foreground="White" Height="23" HorizontalAlignment="Left" x:Name="tPassw" Text="??????" VerticalAlignment="Top" Grid.Row="3" Grid.Column="1" /> <TextBox Visibility="Visible" Grid.Column="2" Grid.Row="2" Height="24" HorizontalAlignment="Left" x:Name="logLogin" VerticalAlignment="Top" Width="150" /> <PasswordBox Visibility="Visible" Code:DefaultButtonService.DefaultButton="{Binding ElementName=bLogin}" PasswordChar="*" Height="24" HorizontalAlignment="Left" x:Name="logPassword" VerticalAlignment="Top" Width="150" Grid.Column="2" Grid.Row="3" /> <Button x:Name="bLogin" MouseEnter="bLogin_MouseEnter" MouseLeave="bLogin_MouseLeave" Visibility="Visible" Content="?????" Grid.Column="2" Grid.Row="4" Click="Button_Click" Height="23" HorizontalAlignment="Left" Margin="81,0,0,0" VerticalAlignment="Top" Width="70" /> <TextBlock MouseLeftButtonDown="ForgotPassword_MouseLeftButtonDown" MouseEnter="ForgotPassword_MouseEnter" MouseLeave="ForgotPassword_MouseLeave" Visibility="Visible" TextDecorations="Underline" Grid.ColumnSpan="2" Grid.Row="4" Height="23" HorizontalAlignment="Left" x:Name="ForgotPassword" Text="?????? ???????" VerticalAlignment="Top" Foreground="White" FontFamily="Verdana" FontSize="13" Grid.Column="1" /> <TextBlock MouseEnter="tbRegistration_MouseEnter" MouseLeave="tbRegistration_MouseLeave" MouseLeftButtonDown="tbRegistration_MouseLeftButtonDown" Grid.Column="2" Grid.Row="6" Height="23" x:Name="tbRegistration" TextDecorations="Underline" Text="???????????" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" TextAlignment="Center" HorizontalAlignment="Center" Foreground="#FF1C1C92" FontWeight="Normal" Margin="0,0,57,0" /> <TextBlock Cursor="Arrow" Height="23" HorizontalAlignment="Left" Margin="11,-3,0,0" Text="?????? ???????" VerticalAlignment="Top" Grid.ColumnSpan="3" Grid.RowSpan="2" FontFamily="Verdana" FontSize="13" FontWeight="Bold" Foreground="White" /> <Image Visibility="Collapsed" Height="70" x:Name="imUser" Stretch="Fill" Width="70" Grid.ColumnSpan="2" Margin="11,0,0,0" Grid.Row="2" Grid.RowSpan="2" Source="/CAP;component/Images/user2.png" /> <TextBlock x:Name="tbHello" Grid.Column="2" Visibility="Collapsed" Grid.Row="2" Height="auto" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="6,0,0,0" Text="" VerticalAlignment="Top" FontFamily="Verdana" FontSize="13" Foreground="White" Width="145" /> </Grid> </Border> <Border x:Name="MenuBorder" Margin="0,0,0,50" Width="250" Visibility="Collapsed"> <StackPanel x:Name="spMenu" Width="240" HorizontalAlignment="Left"> <telerikNavigation:RadTreeView x:Name="tvMainMenu" Width="240" Selected="TreeView1_Selected" SelectedValuePath="Text" telerik:Theming.Theme="Windows7" FontFamily="Verdana" FontSize="12"/> </StackPanel> </Border> </StackPanel> </Grid> <Border x:Name="FooterBorder" VerticalAlignment="Bottom" Width="auto" Height="76"> <Border.Background> <ImageBrush ImageSource="/CAP;component/Images/footer2.png" /> </Border.Background> <TextBlock x:Name="tbFooter" Height="24" Width="auto" Margin="0,20,0,0" TextAlignment="Center" HorizontalAlignment="Stretch" VerticalAlignment="Center" Foreground="White" FontFamily="Verdana" FontSize="11"> </TextBlock> </Border> </Grid> </ScrollViewer.Content> </ScrollViewer> </UserControl> MainPage.xaml.cs using System; using System.Collections.Generic; using System.Linq; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Navigation; using CAP.Code; using CAP.Registrator; using System.Windows.Input; using System.ComponentModel.DataAnnotations; using System.Windows.Browser; using Telerik.Windows.Controls; using System.Net; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Navigation; using System.Windows.Shapes; namespace CAP { public partial class MainPage { public App Appvars = Application.Current as App; private readonly RegistratorClient registrator; public SiteMapBuilder builder; public MainPage() { InitializeComponent(); sV.SetIsMouseWheelScrollingEnabled(true); builder = new SiteMapBuilder(spSiteMap); try { //working with service } catch { this.ContentFrame.Navigate(new Uri(String.Format("ErrorPage"), UriKind.RelativeOrAbsolute)); } } /// Recursive method to update the correct scrollviewer (if exists) private ScrollViewer CheckParent(FrameworkElement element) { ScrollViewer _result = element as ScrollViewer; if (element != null && _result == null) { FrameworkElement _temp = element.Parent as FrameworkElement; _result = CheckParent(_temp); } return _result; } // If an error occurs during navigation, show an error window private void ContentFrame_NavigationFailed(object sender, NavigationFailedEventArgs e) { e.Handled = true; ChildWindow errorWin = new ErrorWindow(e.Uri); errorWin.Show(); } } }

Read the article
Goodbye XML… Hello YAML (part 2)

- by Brian Genisio's House Of Bilz

Part 1 After I explained my motivation for using YAML instead of XML for my data, I got a lot of people asking me what type of tooling is available in the .Net space for consuming YAML. In this post, I will discuss a nice tooling option as well as describe some small modifications to leverage the extremely powerful dynamic capabilities of C# 4.0. I will be referring to the following YAML file throughout this post Recipe: Title: Macaroni and Cheese Description: My favorite comfort food. Author: Brian Genisio TimeToPrepare: 30 Minutes Ingredients: - Name: Cheese Quantity: 3 Units: cups - Name: Macaroni Quantity: 16 Units: oz Steps: - Number: 1 Description: Cook the macaroni - Number: 2 Description: Melt the cheese - Number: 3 Description: Mix the cooked macaroni with the melted cheese Tooling It turns out that there are several implementations of YAML tools out there. The neatest one, in my opinion, is YAML for .NET, Visual Studio and Powershell. It includes a great editor plug-in for Visual Studio as well as YamlCore, which is a parsing engine for .Net. It is in active development still, but it is certainly enough to get you going with YAML in .Net. Start by referenceing YamlCore.dll, load your document, and you are on your way. Here is an example of using the parser to get the title of the Recipe: var yaml = YamlLanguage.FileTo("Data.yaml") as Hashtable; var recipe = yaml["Recipe"] as Hashtable; var title = recipe["Title"] as string; In a similar way, you can access data in the Ingredients set: var yaml = YamlLanguage.FileTo("Data.yaml") as Hashtable; var recipe = yaml["Recipe"] as Hashtable; var ingredients = recipe["Ingredients"] as ArrayList; foreach (Hashtable ingredient in ingredients) { var name = ingredient["Name"] as string; } You may have noticed that YamlCore uses non-generic Hashtables and ArrayLists. This is because YamlCore was designed to work in all .Net versions, including 1.0. Everything in the parsed tree is one of two things: Hashtable, ArrayList or Value type (usually String). This translates well to the YAML structure where everything is either a Map, a Set or a Value. Taking it further Personally, I really dislike writing code like this. Years ago, I promised myself to never write the words Hashtable or ArrayList in my .Net code again. They are ugly, mostly depreciated collections that existed before we got generics in C# 2.0. Now, especially that we have dynamic capabilities in C# 4.0, we can do a lot better than this. With a relatively small amount of code, you can wrap the Hashtables and Array lists with a dynamic wrapper (wrapper code at the bottom of this post). The same code can be re-written to look like this: dynamic doc = YamlDoc.Load("Data.yaml"); var title = doc.Recipe.Title; And dynamic doc = YamlDoc.Load("Data.yaml"); foreach (dynamic ingredient in doc.Recipe.Ingredients) { var name = ingredient.Name; } I significantly prefer this code over the previous. That’s not all… the magic really happens when we take this concept into WPF. With a single line of code, you can bind to the data dynamically in the view: DataContext = YamlDoc.Load("Data.yaml"); Then, your XAML is extremely straight-forward (Nothing else. No static types, no adapter code. Nothing): <StackPanel> <TextBlock Text="{Binding Recipe.Title}" /> <TextBlock Text="{Binding Recipe.Description}" /> <TextBlock Text="{Binding Recipe.Author}" /> <TextBlock Text="{Binding Recipe.TimeToPrepare}" /> <TextBlock Text="Ingredients:" FontWeight="Bold" /> <ItemsControl ItemsSource="{Binding Recipe.Ingredients}" Margin="10,0,0,0"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Quantity}" /> <TextBlock Text=" " /> <TextBlock Text="{Binding Units}" /> <TextBlock Text=" of " /> <TextBlock Text="{Binding Name}" /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> <TextBlock Text="Steps:" FontWeight="Bold" /> <ItemsControl ItemsSource="{Binding Recipe.Steps}" Margin="10,0,0,0"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Number}" /> <TextBlock Text=": " /> <TextBlock Text="{Binding Description}" /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </StackPanel> This nifty XAML binding trick only works in WPF, unfortunately. Silverlight handles binding differently, so they don’t support binding to dynamic objects as of late (March 2010). This, in my opinion, is a major lacking feature in Silverlight and I really hope we will see this feature available to us in Silverlight 4 Release. (I am not very optimistic for Silverlight 4, but I can hope for the feature in Silverlight 5, can’t I?) Conclusion I still have a few things I want to say about using YAML in the .Net space including de-serialization and using IronRuby for your YAML parser, but this post is hopefully enough to see how easy it is to incorporate YAML documents in your code. Codeplex Site for YAML tools Dynamic wrapper for YamlCore

Read the article

Search Results

Search found 460 results on 19 pages for 'stackpanel'.

Page 2/19 | < Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12 | Next Page >

- by Edward Tanguay

- by Edward Tanguay

- by psheriff

- by Joel Barsotti

- by Bobby Diaz

- by Adam S

- by sillytweety

- by Brian Sullivan

- by gforg

- by Manolete

- by Flack

- by cfouche

- by Ali

- by phenevo

- by Stephen Stranded

- by Tan

- by Martin

- by Tan

- by Silver Gun

- by Russ

- by mybrokengnome

- by SteveCav

- by lina

- by Brian Genisio's House Of Bilz

< Previous Page | 1 2 3 4 5 6 7 8 9 10 11 12 | Next Page >