locked
How to change content property of component in sketchflow RRS feed

  • Question

  • Hi,

    I created a component in my Expression Blend 4 SketchFlow project.

    The component consists of a Button-Sketch and a Rectangle-Sketch that will become visible when the Button is entered with the mouse and collapsed when the button is left.

    I then tried to use this component on a screen. I created several of these ButtonComponents on my screen. This all works well.

    BUT I didn't find a way to change the Button Content property (the text that is shown on the button) on the screen. The Content property usually is located on the Common Properties panel but here it is missing. I can only change the Content property in the component, what is not what I want, as every Button on my screen would then have the same name.

    Is there a possibility to make the Content property visible also on the screen?

    Thanks

    webseal

    Wednesday, August 25, 2010 1:17 PM

Answers

  • You would have to create your own DependencyProperty (or just a regular property if you don't care about animating/binding the value), and then databind the content of the button to that property.

    An example:

    ButtonComponent.xaml:

    <UserControl
    	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"
    	x:Class="SilverlightPrototype50Screens.ButtonComponent"
    	d:DesignWidth="188" d:DesignHeight="115" Height="115" Width="188">
    
    	<Grid x:Name="LayoutRoot">
    		<Button x:Name="button" Content="{Binding ButtonContent}" Style="{StaticResource Button-Sketch}" />
    	</Grid>
    </UserControl>
    

    ButtonComponent.xaml.cs:

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace SilverlightPrototype50Screens
    {
    	public partial class ButtonComponent : UserControl
    	{
    		public ButtonComponent()
    		{
    			// Required to initialize variables
    			InitializeComponent();
    			this.DataContext = this;
    		}
    
    		public string ButtonContent
    		{
    			get { return (string)GetValue(ButtonContentProperty); }
    			set { SetValue(ButtonContentProperty, value); }
    		}
    
    		// Using a DependencyProperty as the backing store for ButtonContent. This enables animation, styling, binding, etc...
    		public static readonly DependencyProperty ButtonContentProperty =
    			DependencyProperty.Register("ButtonContent", typeof(string), typeof(ButtonComponent), new PropertyMetadata("Button"));
    	}
    }
    

    Screen_1.xaml:

    <UserControl
    	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:local="clr-namespace:SilverlightPrototype50Screens"
    	mc:Ignorable="d"
    	x:Class="SilverlightPrototype50Screens.Screen_1"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<local:ButtonComponent d:IsPrototypingComposition="True" ButtonContent="Button asdf asdf"/>
    	</Grid>
    </UserControl>
    

    • Proposed as answer by Chuck HaysModerator Wednesday, August 25, 2010 3:06 PM
    • Marked as answer by webseal20 Wednesday, August 25, 2010 8:45 PM
    Wednesday, August 25, 2010 3:06 PM
    Moderator

All replies

  • You would have to create your own DependencyProperty (or just a regular property if you don't care about animating/binding the value), and then databind the content of the button to that property.

    An example:

    ButtonComponent.xaml:

    <UserControl
    	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"
    	x:Class="SilverlightPrototype50Screens.ButtonComponent"
    	d:DesignWidth="188" d:DesignHeight="115" Height="115" Width="188">
    
    	<Grid x:Name="LayoutRoot">
    		<Button x:Name="button" Content="{Binding ButtonContent}" Style="{StaticResource Button-Sketch}" />
    	</Grid>
    </UserControl>
    

    ButtonComponent.xaml.cs:

    using System;
    using System.Windows;
    using System.Windows.Controls;
    using System.Windows.Documents;
    using System.Windows.Ink;
    using System.Windows.Input;
    using System.Windows.Media;
    using System.Windows.Media.Animation;
    using System.Windows.Shapes;
    
    namespace SilverlightPrototype50Screens
    {
    	public partial class ButtonComponent : UserControl
    	{
    		public ButtonComponent()
    		{
    			// Required to initialize variables
    			InitializeComponent();
    			this.DataContext = this;
    		}
    
    		public string ButtonContent
    		{
    			get { return (string)GetValue(ButtonContentProperty); }
    			set { SetValue(ButtonContentProperty, value); }
    		}
    
    		// Using a DependencyProperty as the backing store for ButtonContent. This enables animation, styling, binding, etc...
    		public static readonly DependencyProperty ButtonContentProperty =
    			DependencyProperty.Register("ButtonContent", typeof(string), typeof(ButtonComponent), new PropertyMetadata("Button"));
    	}
    }
    

    Screen_1.xaml:

    <UserControl
    	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:local="clr-namespace:SilverlightPrototype50Screens"
    	mc:Ignorable="d"
    	x:Class="SilverlightPrototype50Screens.Screen_1"
    	Width="640" Height="480">
    
    	<Grid x:Name="LayoutRoot" Background="White">
    		<local:ButtonComponent d:IsPrototypingComposition="True" ButtonContent="Button asdf asdf"/>
    	</Grid>
    </UserControl>
    

    • Proposed as answer by Chuck HaysModerator Wednesday, August 25, 2010 3:06 PM
    • Marked as answer by webseal20 Wednesday, August 25, 2010 8:45 PM
    Wednesday, August 25, 2010 3:06 PM
    Moderator
  • Thanks Chuck.

    Great answer, very detailed and very helpful to get a deeper insight into SketchFlow and properties.

     

    Wednesday, August 25, 2010 8:50 PM