locked
How can I put different vector shape in a user control's instance? RRS feed

  • Question

  • Hi Expression Blend experts:

    In my project, I might need to use a lot items which are similar to each other like a set of buttons, in the buttons, they share the same background, same size/effect in the text, same effect in the vector icon(XAML shape). I am using user control to make it, and I know I can easily use 

    public string inputName

    {
    get { return this.buttonName.Text;}
    set { this.buttonName.Text = value;}
    }

    to made it available for me to change the text for every single instance, but I don't know how can I also use different icon in each button.......

    Or, do I need to build this in another way in stead of using user control?

    Thank you very much!

    Wednesday, April 4, 2012 9:41 PM

Answers

  • Hello Hao.

    One option would be to set up Dependency Properties for your UserControl.

    using System.ComponentModel;
    using System.Windows;
    using System.Windows.Controls;
    
    namespace SLButtonControls
    {	
    	public partial class SLButton1 : UserControl
    	{
    		[Category("Button Settings")]
    		public string ButtonIconPathData { get { return (string)GetValue(ButtonIconPathDataProperty); } set { SetValue(ButtonIconPathDataProperty, value); }} 
    		public static readonly DependencyProperty ButtonIconPathDataProperty = DependencyProperty.Register("ButtonIconPathData", typeof(string), typeof(SLButton1), null);
    		
    		[Category("Button Settings")]
    		public string ButtonText { get { return (string)GetValue(ButtonTextProperty); } set { SetValue(ButtonTextProperty, value); }} 
    		public static readonly DependencyProperty ButtonTextProperty = DependencyProperty.Register("ButtonText", typeof(string), typeof(SLButton1), null);
    		
    		public SLButton1()
    		{
    			InitializeComponent();
    		}
    	}
    }


    Then bind the icon shape and button or userControl text to those properties...

    <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" x:Name="UserControl"
    	mc:Ignorable="d"
    	x:Class="SLButtonControls.SLButton1"
    	d:DesignWidth="640" d:DesignHeight="480" Width="100" Height="100">
    
    	<Grid x:Name="LayoutRoot">
    		<Rectangle>
    			<Rectangle.Fill>
    				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    					<GradientStop Color="#FF585858" Offset="1"/>
    					<GradientStop Color="#FFD4D4D4"/>
    				</LinearGradientBrush>
    			</Rectangle.Fill>
    		</Rectangle>
    		<StackPanel Margin="0" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
    			<Path x:Name="path2" Data="{Binding ButtonIconPathData, ElementName=UserControl}" Fill="Black" HorizontalAlignment="Center" Height="30" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Width="50" d:LayoutOverrides="Height" Margin="0,0,0,10"/>
    			<TextBlock x:Name="text" Margin="0" TextWrapping="Wrap" Text="{Binding ButtonText, ElementName=UserControl}" VerticalAlignment="Center" TextAlignment="Center" HorizontalAlignment="Center" FontSize="13.333"/>
    		</StackPanel>
    	</Grid>
    </UserControl>

    Then when you added the button to your page you could set the path data and the text.

    ...

    If your icon is not a true path, but rather an image you could bind an image source to...

    		[Category("Button Settings")]
    		public ImageSource ButtonIcon { get { return (ImageSource)GetValue(ButtonIconProperty); } set { SetValue(ButtonIconProperty, value); }} 
    		public static readonly DependencyProperty ButtonIconProperty = DependencyProperty.Register("ButtonIcon", typeof(ImageSource), typeof(SLButton1), null);

    ...

    I hope I understood what your were trying to accomplish.

    ~Christine


    • Edited by Christine L. _ Friday, April 6, 2012 12:28 PM
    • Marked as answer by Hao Huang Monday, April 9, 2012 4:57 PM
    • Unmarked as answer by Hao Huang Thursday, April 19, 2012 8:12 PM
    • Marked as answer by Hao Huang Thursday, April 19, 2012 8:12 PM
    Thursday, April 5, 2012 2:07 AM
  • Try this for the path...

    M3.073,3.072L3.073,35.5L30.928,35.5L30.928,3.072zM2.488,0L31.514,0C32.885,0 34,1.058 34,2.359L34,36.215C34,37.514 32.885,38.572 31.514,38.572L2.488,38.572C1.117,38.572 -1.87228e-007,37.514 2.3537e-014,36.215L2.3537e-014,2.359C-1.87228e-007,1.058 1.117,0 2.488,0zM11.9079,8.141L20.1891,8.141C21.96,8.141 22.8454,8.88061 22.8454,10.3598C22.8454,11.1724 22.3766,12.0891 21.4391,13.1099L17.9235,17.0164C19.6527,17.2664 20.9912,17.9252 21.9391,18.993C22.887,20.0607 23.361,21.4697 23.361,23.2197C23.361,25.1781 22.7021,26.8345 21.3844,28.1887C20.0667,29.5429 18.3141,30.22 16.1266,30.22C14.5016,30.22 13.1136,29.9023 11.9626,29.2668C10.8115,28.6314 10.236,28.0116 10.236,27.4074C10.236,27.022 11.2464,25.8761 11.5798,25.8761C11.9652,25.8761 15.374,26.5913 15.374,26.6887C15.4634,26.6887 14.96,27.5324 16.1579,27.5324C17.4704,27.5324 18.5068,27.1261 19.2673,26.3136C20.0277,25.5011 20.4079,24.501 20.4079,23.3135C20.4079,20.5842 18.7985,19.2196 15.5798,19.2196C14.7048,19.2196 14.5485,17.157 15.111,16.5007L18.7829,12.1412C19.1683,11.6828 19.2412,10.8599 19.0016,10.8599L11.9079,10.8599C10.9495,10.8599 10.9495,8.141 11.9079,8.141zM67.719,3.072L67.719,35.5L39.864,35.5L39.864,3.072zM68.304,0L39.278,0C37.907,0 36.792,1.058 36.792,2.359L36.792,36.215C36.792,37.514 37.907,38.572 39.278,38.572L68.304,38.572C69.675,38.572 70.792,37.514 70.792,36.215L70.792,2.359C70.792,1.058 69.675,0 68.304,0zM58.8841,8.141L50.6029,8.141C48.832,8.141 47.9466,8.88061 47.9466,10.3598C47.9466,11.1724 48.4154,12.0891 49.3529,13.1099L52.8685,17.0164C51.1393,17.2664 49.8008,17.9252 48.8529,18.993C47.905,20.0607 47.431,21.4697 47.431,23.2197C47.431,25.1781 48.0899,26.8345 49.4076,28.1887C50.7253,29.5429 52.4779,30.22 54.6654,30.22C56.2904,30.22 57.6784,29.9023 58.8294,29.2668C59.9805,28.6314 60.556,28.0116 60.556,27.4074C60.556,27.022 59.5456,25.8761 59.2122,25.8761C58.8268,25.8761 56.3712,26.5588 55.1796,26.6887C55.3286,26.7861 55.832,27.5324 54.6341,27.5324C53.3216,27.5324 52.2852,27.1261 51.5247,26.3136C50.7643,25.5011 50.3841,24.501 50.3841,23.3135C50.3841,20.5842 51.9935,19.2196 55.2122,19.2196C56.0872,19.2196 56.2435,17.157 55.681,16.5007L52.0091,12.1412C51.6237,11.6828 51.5508,10.8599 51.7904,10.8599L58.8841,10.8599C59.8425,10.8599 59.8425,8.141 58.8841,8.141z

    ~Christine

    • Marked as answer by Hao Huang Monday, April 9, 2012 7:45 PM
    Monday, April 9, 2012 5:13 AM

All replies

  • Hello Hao.

    One option would be to set up Dependency Properties for your UserControl.

    using System.ComponentModel;
    using System.Windows;
    using System.Windows.Controls;
    
    namespace SLButtonControls
    {	
    	public partial class SLButton1 : UserControl
    	{
    		[Category("Button Settings")]
    		public string ButtonIconPathData { get { return (string)GetValue(ButtonIconPathDataProperty); } set { SetValue(ButtonIconPathDataProperty, value); }} 
    		public static readonly DependencyProperty ButtonIconPathDataProperty = DependencyProperty.Register("ButtonIconPathData", typeof(string), typeof(SLButton1), null);
    		
    		[Category("Button Settings")]
    		public string ButtonText { get { return (string)GetValue(ButtonTextProperty); } set { SetValue(ButtonTextProperty, value); }} 
    		public static readonly DependencyProperty ButtonTextProperty = DependencyProperty.Register("ButtonText", typeof(string), typeof(SLButton1), null);
    		
    		public SLButton1()
    		{
    			InitializeComponent();
    		}
    	}
    }


    Then bind the icon shape and button or userControl text to those properties...

    <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" x:Name="UserControl"
    	mc:Ignorable="d"
    	x:Class="SLButtonControls.SLButton1"
    	d:DesignWidth="640" d:DesignHeight="480" Width="100" Height="100">
    
    	<Grid x:Name="LayoutRoot">
    		<Rectangle>
    			<Rectangle.Fill>
    				<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    					<GradientStop Color="#FF585858" Offset="1"/>
    					<GradientStop Color="#FFD4D4D4"/>
    				</LinearGradientBrush>
    			</Rectangle.Fill>
    		</Rectangle>
    		<StackPanel Margin="0" Orientation="Vertical" HorizontalAlignment="Center" VerticalAlignment="Center">
    			<Path x:Name="path2" Data="{Binding ButtonIconPathData, ElementName=UserControl}" Fill="Black" HorizontalAlignment="Center" Height="30" Stretch="Fill" Stroke="Black" UseLayoutRounding="False" Width="50" d:LayoutOverrides="Height" Margin="0,0,0,10"/>
    			<TextBlock x:Name="text" Margin="0" TextWrapping="Wrap" Text="{Binding ButtonText, ElementName=UserControl}" VerticalAlignment="Center" TextAlignment="Center" HorizontalAlignment="Center" FontSize="13.333"/>
    		</StackPanel>
    	</Grid>
    </UserControl>

    Then when you added the button to your page you could set the path data and the text.

    ...

    If your icon is not a true path, but rather an image you could bind an image source to...

    		[Category("Button Settings")]
    		public ImageSource ButtonIcon { get { return (ImageSource)GetValue(ButtonIconProperty); } set { SetValue(ButtonIconProperty, value); }} 
    		public static readonly DependencyProperty ButtonIconProperty = DependencyProperty.Register("ButtonIcon", typeof(ImageSource), typeof(SLButton1), null);

    ...

    I hope I understood what your were trying to accomplish.

    ~Christine


    • Edited by Christine L. _ Friday, April 6, 2012 12:28 PM
    • Marked as answer by Hao Huang Monday, April 9, 2012 4:57 PM
    • Unmarked as answer by Hao Huang Thursday, April 19, 2012 8:12 PM
    • Marked as answer by Hao Huang Thursday, April 19, 2012 8:12 PM
    Thursday, April 5, 2012 2:07 AM
  • Hey Christine, 

    It works! It works! It really helps a lot! Thank you very much!

    Friday, April 6, 2012 5:25 PM
  • Hi Christine, 

    I still have a question. How can I add the toggle control attribute into the user control? this item is for a switch on/off, like I switch one image'visibility  inside it just easily by clicking it.

    Thanks again!

    Friday, April 6, 2012 6:05 PM
  • Hi Christine, 

    I still have a question. How can I add the toggle control attribute into the user control? this item is for a switch on/off, like I switch one image'visibility  inside it just easily by clicking it.

    Thanks again!

    So switching an image visibility within the userControl at run time or design time?  If it is at run time, do you want it to toggle when the user clicks the button?  Or what action would be activating the toggle?

    I'll be right back with a couple of examples for design and run times.

    ~Christine

    This run time example toggles the path visibility when the user clicks the button...

    I added a MouseLeftButtonDown event to the userControl...

    d:DesignWidth="640" d:DesignHeight="480" Width="100" Height="100" MouseLeftButtonDown="UserControl_MouseLeftButtonDown">

    And added this to my code-behind...

    		private void UserControl_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			if (path2.Visibility == Visibility.Visible)
    				path2.Visibility = Visibility.Collapsed;
    			else
    				path2.Visibility = Visibility.Visible;
    		}

    So that is one way to toggle at run time.

    For Design Time you could add another Dependency Property like this...

    [Category("Button Settings")]
    public bool ShowIcon { get { return (bool)GetValue(ShowIconProperty); } set { SetValue(ShowIconProperty, value); }} 
    public static readonly DependencyProperty ShowIconProperty = DependencyProperty.Register("ShowIcon", typeof(bool), typeof(SLButton1), null);

    And add a control loaded event to your user control...

    private void UserControl_Loaded(object sender, System.Windows.RoutedEventArgs e) { if (ShowIcon) path2.Visibility = Visibility.Visible; else path2.Visibility = Visibility.Collapsed; }

    d:DesignWidth="640" d:DesignHeight="480" Width="100" Height="100" Loaded="UserControl_Loaded">

    That way when you added the button to your page, in your button settings you could simply check to show the icon or path...

    But I suspect I misunderstood exactly what you are asking, so let me know if that helps or you meant something else.

    ~Christine



    Friday, April 6, 2012 7:05 PM
  • Thank you Christine,

    "at run time or design time?" - I am not sure if I understand the term correctly, I think " runtime

    "do you want it to toggle when the user clicks the button?  Or what action would be activating the toggle?" - yes, so far I just want to make it toggle by click, but later on I will add keyboard control by pressing some key

    Friday, April 6, 2012 7:46 PM
  • My definition of run time would be when the project is published and an end-user is using the application.

    For design time is when you are designing the project.  For instance if you placed several buttons on the page and wanted some to show an image and others not to show the image.

    So if you want to change the visibility when clicked by the user, simply adding a MouseLeftButtonDown event should do it...

    private void UserControl_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
    	if (path2.Visibility == Visibility.Visible)
    		path2.Visibility = Visibility.Collapsed;
    	else
    		path2.Visibility = Visibility.Visible;
    }

    d:DesignWidth="640" d:DesignHeight="480" Width="100" Height="100" MouseLeftButtonDown="UserControl_MouseLeftButtonDown">

    And to be clear, I was doing this from within the UserControl itself.  So this event would happen on every button you placed on your page.

    ~Christine

    • Marked as answer by Hao Huang Monday, April 9, 2012 7:45 PM
    • Unmarked as answer by Hao Huang Thursday, April 19, 2012 8:12 PM
    Friday, April 6, 2012 8:21 PM
  • Hi Christine,

    I need your help on this again! I used the way you suggested to build the user control (text+path icon), it works...sometime. 

    when I fill the path data into ButtonIconPathData, some time it show up some time it doesn't. Maybe because the path is too complex? I don't know...

    Here is one example that doesn't work, the path is:

    M3.073,3.072 L3.073,35.500003 30.928001,35.500003 30.928001,3.072 z M2.4879997,0 L31.514,0 C32.884998,0 34,1.058 34,2.3590004 L34,36.215003 C34,37.514003 32.884998,38.572001 31.514,38.572001 L2.4879997,38.572001 C1.1169998,38.572001 -1.8722844E-07,37.514003 2.3537037E-14,36.215003 L2.3537037E-14,2.3590004 C-1.8722844E-07,1.058 1.1169998,0 2.4879997,0 z M11.907875,8.1410003 L20.189125,8.1410003 C21.959958,8.1410003 22.845375,8.8806136 22.845375,10.359838 22.845375,11.172371 22.376625,12.089075 21.439125,13.109947 L17.9235,17.016352 C19.652666,17.266364 20.991208,17.925244 21.939125,18.992993 22.887041,20.060745 23.361,21.469654 23.361,23.219723 23.361,25.178135 22.702146,26.834451 21.384438,28.188671 20.066729,29.54289 18.314125,30.220001 16.126625,30.220001 14.501625,30.220001 13.113604,29.90228 11.962563,29.266838 10.811521,28.631397 10.236,28.01158 10.236,27.40739 10.236,27.021958 11.246417,25.876079 11.57975,25.876079 11.965167,25.876079 12.39225,26.047961&#xd;&#xa;12.861,26.391724 13.861,27.15217 14.959958,27.532394 16.157875,27.532394 17.470375,27.532394 18.506833,27.126128 19.26725,26.313596 20.027666,25.501064 20.407875,24.501024 20.407875,23.313477 20.407875,20.584203 18.7985,19.219565 15.57975,19.219565 14.70475,19.219565 14.5485,17.156985 15.111,16.500707 L18.782875,12.141159 C19.168291,11.682809 19.241208,10.859858 19.001625,10.859858 L11.907875,10.859858 C10.949542,10.859858 10.949542,8.1410003 11.907875,8.1410003 z M67.719,3.072 L67.719,35.500002 39.863999,35.500002 39.863999,3.072 z M68.304,0 L39.278,0 C37.907002,0 36.792,1.058 36.792,2.3590004 L36.792,36.215002 C36.792,37.514002 37.907002,38.572001 39.278,38.572001 L68.304,38.572001 C69.675,38.572001 70.792,37.514002 70.792,36.215002 L70.792,2.3590004 C70.792,1.058 69.675,0 68.304,0 z M58.884125,8.1410003 L50.602875,8.1410003 C48.832042,8.1410003 47.946625,8.8806136 47.946625,10.359838 47.946625,11.17237 48.415375,12.089074 49.352875,13.109947 L52.8685,17.016353 C51.139334,17.266365 49.800792,17.925244 48.852875,18.992994 47.904959,20.060745 47.431,21.469654 47.431,23.219724 47.431,25.178135 48.089854,26.834451 49.407562,28.18867 50.725271,29.54289 52.477875,30.220001 54.665375,30.220001 56.290375,30.220001 57.678396,29.902279 58.829437,29.266838 59.980479,28.631397 60.556,28.01158 60.556,27.40739 60.556,27.021958 59.545583,25.876079 59.21225,25.876079 58.826833,25.876079 58.39975,26.047961&#xd;&#xa;57.931,26.391724 56.931,27.15217 55.832042,27.532394 54.634125,27.532394 53.321625,27.532394 52.285167,27.126128 51.52475,26.313596 50.764334,25.501064 50.384125,24.501024 50.384125,23.313477 50.384125,20.584203 51.9935,19.219565 55.21225,19.219565 56.08725,19.219565 56.2435,17.156985 55.681,16.500707 L52.009125,12.141159 C51.623709,11.682808 51.550792,10.859858 51.790375,10.859858 L58.884125,10.859858 C59.842458,10.859858 59.842458,8.1410003 58.884125,8.1410003 z

    thank you again...

    Monday, April 9, 2012 3:25 AM
  • Hi Christine,

    I need your help on this again! I used the way you suggested to build the user control (text+path icon), it works...sometime. 

    when I fill the path data into ButtonIconPathData, some time it show up some time it doesn't. Maybe because the path is too complex? I don't know...

    Here is one example that doesn't work, the path is:

    M3.073,3.072 L3.073,35.500003 30.928001,35.500003 30.928001,3.072 z M2.4879997,0 L31.514,0 C32.884998,0 34,1.058 34,2.3590004 L34,36.215003 C34,37.514003 32.884998,38.572001 31.514,38.572001 L2.4879997,38.572001 C1.1169998,38.572001 -1.8722844E-07,37.514003 2.3537037E-14,36.215003 L2.3537037E-14,2.3590004 C-1.8722844E-07,1.058 1.1169998,0 2.4879997,0 z M11.907875,8.1410003 L20.189125,8.1410003 C21.959958,8.1410003 22.845375,8.8806136 22.845375,10.359838 22.845375,11.172371 22.376625,12.089075 21.439125,13.109947 L17.9235,17.016352 C19.652666,17.266364 20.991208,17.925244 21.939125,18.992993 22.887041,20.060745 23.361,21.469654 23.361,23.219723 23.361,25.178135 22.702146,26.834451 21.384438,28.188671 20.066729,29.54289 18.314125,30.220001 16.126625,30.220001 14.501625,30.220001 13.113604,29.90228 11.962563,29.266838 10.811521,28.631397 10.236,28.01158 10.236,27.40739 10.236,27.021958 11.246417,25.876079 11.57975,25.876079 11.965167,25.876079 12.39225,26.047961&#xd;&#xa;12.861,26.391724 13.861,27.15217 14.959958,27.532394 16.157875,27.532394 17.470375,27.532394 18.506833,27.126128 19.26725,26.313596 20.027666,25.501064 20.407875,24.501024 20.407875,23.313477 20.407875,20.584203 18.7985,19.219565 15.57975,19.219565 14.70475,19.219565 14.5485,17.156985 15.111,16.500707 L18.782875,12.141159 C19.168291,11.682809 19.241208,10.859858 19.001625,10.859858 L11.907875,10.859858 C10.949542,10.859858 10.949542,8.1410003 11.907875,8.1410003 z M67.719,3.072 L67.719,35.500002 39.863999,35.500002 39.863999,3.072 z M68.304,0 L39.278,0 C37.907002,0 36.792,1.058 36.792,2.3590004 L36.792,36.215002 C36.792,37.514002 37.907002,38.572001 39.278,38.572001 L68.304,38.572001 C69.675,38.572001 70.792,37.514002 70.792,36.215002 L70.792,2.3590004 C70.792,1.058 69.675,0 68.304,0 z M58.884125,8.1410003 L50.602875,8.1410003 C48.832042,8.1410003 47.946625,8.8806136 47.946625,10.359838 47.946625,11.17237 48.415375,12.089074 49.352875,13.109947 L52.8685,17.016353 C51.139334,17.266365 49.800792,17.925244 48.852875,18.992994 47.904959,20.060745 47.431,21.469654 47.431,23.219724 47.431,25.178135 48.089854,26.834451 49.407562,28.18867 50.725271,29.54289 52.477875,30.220001 54.665375,30.220001 56.290375,30.220001 57.678396,29.902279 58.829437,29.266838 59.980479,28.631397 60.556,28.01158 60.556,27.40739 60.556,27.021958 59.545583,25.876079 59.21225,25.876079 58.826833,25.876079 58.39975,26.047961&#xd;&#xa;57.931,26.391724 56.931,27.15217 55.832042,27.532394 54.634125,27.532394 53.321625,27.532394 52.285167,27.126128 51.52475,26.313596 50.764334,25.501064 50.384125,24.501024 50.384125,23.313477 50.384125,20.584203 51.9935,19.219565 55.21225,19.219565 56.08725,19.219565 56.2435,17.156985 55.681,16.500707 L52.009125,12.141159 C51.623709,11.682808 51.550792,10.859858 51.790375,10.859858 L58.884125,10.859858 C59.842458,10.859858 59.842458,8.1410003 58.884125,8.1410003 z

    thank you again...

    Get rid of this in the path...

    &#xd;&#xa;

    It is in there twice.

    See if that works.

    When I tried it, it looks like this...

    So I believe atleast 2 of the points are missing.  You may need to start over.

    Sorry you are having problems.

    ~Christine

    Monday, April 9, 2012 4:55 AM
  • Try this for the path...

    M3.073,3.072L3.073,35.5L30.928,35.5L30.928,3.072zM2.488,0L31.514,0C32.885,0 34,1.058 34,2.359L34,36.215C34,37.514 32.885,38.572 31.514,38.572L2.488,38.572C1.117,38.572 -1.87228e-007,37.514 2.3537e-014,36.215L2.3537e-014,2.359C-1.87228e-007,1.058 1.117,0 2.488,0zM11.9079,8.141L20.1891,8.141C21.96,8.141 22.8454,8.88061 22.8454,10.3598C22.8454,11.1724 22.3766,12.0891 21.4391,13.1099L17.9235,17.0164C19.6527,17.2664 20.9912,17.9252 21.9391,18.993C22.887,20.0607 23.361,21.4697 23.361,23.2197C23.361,25.1781 22.7021,26.8345 21.3844,28.1887C20.0667,29.5429 18.3141,30.22 16.1266,30.22C14.5016,30.22 13.1136,29.9023 11.9626,29.2668C10.8115,28.6314 10.236,28.0116 10.236,27.4074C10.236,27.022 11.2464,25.8761 11.5798,25.8761C11.9652,25.8761 15.374,26.5913 15.374,26.6887C15.4634,26.6887 14.96,27.5324 16.1579,27.5324C17.4704,27.5324 18.5068,27.1261 19.2673,26.3136C20.0277,25.5011 20.4079,24.501 20.4079,23.3135C20.4079,20.5842 18.7985,19.2196 15.5798,19.2196C14.7048,19.2196 14.5485,17.157 15.111,16.5007L18.7829,12.1412C19.1683,11.6828 19.2412,10.8599 19.0016,10.8599L11.9079,10.8599C10.9495,10.8599 10.9495,8.141 11.9079,8.141zM67.719,3.072L67.719,35.5L39.864,35.5L39.864,3.072zM68.304,0L39.278,0C37.907,0 36.792,1.058 36.792,2.359L36.792,36.215C36.792,37.514 37.907,38.572 39.278,38.572L68.304,38.572C69.675,38.572 70.792,37.514 70.792,36.215L70.792,2.359C70.792,1.058 69.675,0 68.304,0zM58.8841,8.141L50.6029,8.141C48.832,8.141 47.9466,8.88061 47.9466,10.3598C47.9466,11.1724 48.4154,12.0891 49.3529,13.1099L52.8685,17.0164C51.1393,17.2664 49.8008,17.9252 48.8529,18.993C47.905,20.0607 47.431,21.4697 47.431,23.2197C47.431,25.1781 48.0899,26.8345 49.4076,28.1887C50.7253,29.5429 52.4779,30.22 54.6654,30.22C56.2904,30.22 57.6784,29.9023 58.8294,29.2668C59.9805,28.6314 60.556,28.0116 60.556,27.4074C60.556,27.022 59.5456,25.8761 59.2122,25.8761C58.8268,25.8761 56.3712,26.5588 55.1796,26.6887C55.3286,26.7861 55.832,27.5324 54.6341,27.5324C53.3216,27.5324 52.2852,27.1261 51.5247,26.3136C50.7643,25.5011 50.3841,24.501 50.3841,23.3135C50.3841,20.5842 51.9935,19.2196 55.2122,19.2196C56.0872,19.2196 56.2435,17.157 55.681,16.5007L52.0091,12.1412C51.6237,11.6828 51.5508,10.8599 51.7904,10.8599L58.8841,10.8599C59.8425,10.8599 59.8425,8.141 58.8841,8.141z

    ~Christine

    • Marked as answer by Hao Huang Monday, April 9, 2012 7:45 PM
    Monday, April 9, 2012 5:13 AM
  • Em... it works, seams I need to make sure the shape is clean enough.

    Thank you very much Christine, thank you for helping me all the way. I really really appreciated.

    Monday, April 9, 2012 4:57 PM
  • Hi Christine,

    Do you remember you told me how to toggle the button On and Off before? It works, thanks.

    I am going to one more style to indicate the item is selected or not, I added one category in "button Setting" which will return a string "1" or "2", so how should I write in the toggle section. Here is my existing code:

    private void TurningOnOff(object sender, System.Windows.Input.MouseButtonEventArgs e)
    {
    if (this.MenuItemOn.Visibility == Visibility.Visible)
    this.MenuItemOn.Visibility = Visibility.Collapsed;
    else
    this.MenuItemOn.Visibility = Visibility.Visible;

    if (this.Status.Visibility == Visibility.Visible)
    this.Status.Visibility = Visibility.Collapsed;
    else
    this.Status.Visibility = Visibility.Visible; }

    Thank you!!

    Tuesday, April 10, 2012 8:53 PM
  • By style do you mean an actual button style or a state?

    Is the button truly a button?  If so could you not use the button states?

    If it is not truly a button but just a userControl...  When the value is "1"  what happens?  a color changes?  a border color changes?  If you are really wanting to change to a different <Style> then what is that <Style> applied to? 

    I apologize for being thick here, I'm not really understanding what we need to happen on the value change. :)

    ~Christine

    Tuesday, April 10, 2012 9:54 PM
  • I doubt this is what you are looking for, but...

    My Code-Behind for myButton...

    using System.ComponentModel;
    using System.Windows;
    using System.Windows.Controls;
    
    namespace WpfApplication10
    {
    	public partial class myButton : UserControl
    	{
    		[Category("Button Settings")]
    		public string ButtonIconPathData { get { return (string)GetValue(ButtonIconPathDataProperty); } set { SetValue(ButtonIconPathDataProperty, value); }} 
    		public static readonly DependencyProperty ButtonIconPathDataProperty = DependencyProperty.Register("ButtonIconPathData", typeof(string), typeof(myButton), null);
    		
    		[Category("Button Settings")]
    		public string ButtonText { get { return (string)GetValue(ButtonTextProperty); } set { SetValue(ButtonTextProperty, value); }} 
    		public static readonly DependencyProperty ButtonTextProperty = DependencyProperty.Register("ButtonText", typeof(string), typeof(myButton), null);
    		
    		[Category("Button Settings")]
    		public bool ButtonSelected { get { return (bool)GetValue(ButtonSelectedProperty); } set { SetValue(ButtonSelectedProperty, value); }} 
    		public static readonly DependencyProperty ButtonSelectedProperty = DependencyProperty.Register("ButtonSelected", typeof(bool), typeof(myButton), null);
    
    		public myButton()
    		{
    			this.InitializeComponent();
    		}
    
    		private void UserControl_MouseLeftButtonDown(object sender, System.Windows.Input.MouseButtonEventArgs e)
    		{
    			if (path2.Visibility == Visibility.Visible)
    			{
    				ButtonSelected = false;
    				path2.Visibility = Visibility.Collapsed;				
    			}
    			else
    			{
    				ButtonSelected = true;
    				path2.Visibility = Visibility.Visible;				
    			}
    		}
    	}
    }

    I used bool values instead of string for buttonSelected, but string would also work in the following...

    Here is the XAML...

    <i:Interaction.Triggers>
    		<ei:DataTrigger Binding="{Binding ButtonSelected, ElementName=UserControl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="true">
    			<ei:ChangePropertyAction TargetObject="{Binding ElementName=rectangle}" PropertyName="Fill" TargetName="rectangle">
    				<ei:ChangePropertyAction.Value>
    					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    						<GradientStop Color="White" Offset="0"/>
    						<GradientStop Color="Red" Offset="1"/>
    					</LinearGradientBrush>
    				</ei:ChangePropertyAction.Value>
    			</ei:ChangePropertyAction>
    		</ei:DataTrigger>
    		<ei:DataTrigger Binding="{Binding ButtonSelected, ElementName=UserControl, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" Value="false">
    			<ei:ChangePropertyAction TargetObject="{Binding ElementName=rectangle}" PropertyName="Fill" TargetName="rectangle">
    				<ei:ChangePropertyAction.Value>
    					<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
    						<GradientStop Color="White" Offset="0"/>
    						<GradientStop Color="#FF979797" Offset="1"/>
    					</LinearGradientBrush>
    				</ei:ChangePropertyAction.Value>
    			</ei:ChangePropertyAction>
    		</ei:DataTrigger>
    	</i:Interaction.Triggers>

    Just change the value from false to "1" or true to "2" for your string DependencyProperty.

    If you use this method, there is something you have to watch out for... a bit of a bug in Blend.

    Blend will try to run the 2 triggers together.  So you have to make sure they are individual (See the XAML Bold Lines Above.  I had to manually add those.)  If you don't then both triggers will fire and it will look like there wasn't a change.

    ~Christine


    Tuesday, April 10, 2012 10:21 PM
  • Hi Christine, 

    Actually I am not trying to do this... I am sorry that I didn't explain clearly. 

    or say, I just don't know hoe to write a 2 level "if" statement here, what I want to achieve is:

    if (this.selectStyle="1")

    then toggle image1's visibility

    if(this.selectStyle="2")

    then toggle image2's visibility

    Am I explaining more clearly by saying this? Thanks a lot!

    Tuesday, April 10, 2012 11:00 PM
  • Is this what you mean?

    			if (selectStyle == "1")
    			{
    				image1.Visibility = Visibility.Visible;
    				image2.Visibility = Visibility.Collapsed;
    			}
    			else if (selectStyle == "2")
    			{
    				image1.Visibility = Visibility.Collapsed;
    				image2.Visibility = Visibility.Visible;
    			}
    ~Christine

    Tuesday, April 10, 2012 11:19 PM
  • I have to go... it is birthday night, so here is what I came up with...

    I added a CallMethodAction to my control.

    	<i:Interaction.Triggers>
    		<ei:PropertyChangedTrigger Binding="{Binding ButtonSelected, ElementName=UserControl}">
    			<ei:CallMethodAction MethodName="ChangeImage"/>
    		</ei:PropertyChangedTrigger>
    	</i:Interaction.Triggers>

    Where I have ButtonSelected… it would be your string property, selectStyle.

    And the code behind or method being called, placed in the code-behind for the control...

    		public void ChangeImage()
    		{
    			if (ButtonSelected == true)
    			{
    				image1.Visibility = Visibility.Visible;
    				image2.Visibility = Visibility.Collapsed;
    			}
    			else if (ButtonSelected == false)
    			{
    				image1.Visibility = Visibility.Collapsed;
    				image2.Visibility = Visibility.Visible;
    			}
    		}

    Hope that helps. And have a great night!

    ~Christine

    Tuesday, April 10, 2012 11:31 PM
  • Hi Christine,

    My first Expression Blend project is about to finished, thanks very much for your helping, I made it happen eventually, I really appreciate your help, a lot! 

    but...

    I have one last question , :)

    In the user control that we talked here, I want to add one more function in the code behind. Is it possible to "put" the mouse over this user control every time when I  load the containing component screen?

    I don't know if "load " is the right term, what I mean here is when I change the visibility of the component screen (which is containing this user control ) from collapsed to visible.

    Thank you very much !


    • Edited by Hao Huang Thursday, April 19, 2012 7:49 PM
    Thursday, April 19, 2012 7:48 PM
  • Here is one way...

    http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/1ba35ea0-7313-41a4-9a4a-472575f21e46/

    and probably a more simple approach but a bit annoying...

    http://msdn.microsoft.com/en-us/library/system.windows.forms.cursor.position.aspx

    For the second you would have to add the System.Windows.Forms.dll and a using System.Windows.Forms statement. 

    The annoying part is that... as soon as you do that, you'll get some errors (possibly) that there is an "ambiguous reference between... System.Windows and System.Windows.Forms"

    To solve it... say you were using a MessageBox, you would have to refer to it as System.Windows.MessageBox.Show() or System.Windows.Forms.MessageBox.Show()...

    Hope that wasn't too confusing.

    ~Christine

    That is the annoying part. :)

    Thursday, April 19, 2012 10:44 PM
  • Hi Christine,

    I used the first way, it works fine!

        public void MyMethod()
        {
            SetCursorPos( 500, 500 );
        }

    but In my case I might not going to use a fixed digit to define my new position of my cursor, I want to refer to where ever my user control is, my user control will be in some different component screens(with different positions) and the component screens will be called in to the main screen with different position too. 

    Is that achievable? I tried some like        this.Margin.Left + 50               ,but it doesn't work.

    Friday, April 20, 2012 6:58 PM