locked
How to add two click mode to same button ? RRS feed

  • Question

  • If i want to react my button in two different events like on click it should change its colour and on hover it should change its size and alignment how can this be done ?
    Saturday, August 10, 2013 10:54 PM

Answers

  • To alter how the button appears when it is being clicked or hovered you need to override its control template. See Quickstart: Control templates for an explanation and example code. Also check out the XAML control and app styling sample (Windows 8)

    The easiest way is to open your project in Blend. Select the button you want to modify and choose "Edit Template.Edit a copy..." from the context menu. In the template editor, go to the visual states tab, select the PointerOver and Pressed states and record the colours, size, etc. as you like.

    --Rob

    • Proposed as answer by Ramprasath R Tuesday, August 13, 2013 11:33 AM
    • Marked as answer by Anne Jing Thursday, August 15, 2013 2:18 PM
    Sunday, August 11, 2013 1:01 AM
    Moderator

All replies

  • To alter how the button appears when it is being clicked or hovered you need to override its control template. See Quickstart: Control templates for an explanation and example code. Also check out the XAML control and app styling sample (Windows 8)

    The easiest way is to open your project in Blend. Select the button you want to modify and choose "Edit Template.Edit a copy..." from the context menu. In the template editor, go to the visual states tab, select the PointerOver and Pressed states and record the colours, size, etc. as you like.

    --Rob

    • Proposed as answer by Ramprasath R Tuesday, August 13, 2013 11:33 AM
    • Marked as answer by Anne Jing Thursday, August 15, 2013 2:18 PM
    Sunday, August 11, 2013 1:01 AM
    Moderator
  • Hello jdmac,

    You can try (Design):

     <Button x:Name="btn1" Content="Open Pdf File" Click="btn1_Click_1" Height="200" Width="400" PointerEntered="btn1_PointerEntered_1" PointerExited="btn1_PointerExited_1"/>

    Add coding for click event:

      private async void btn1_Click_1(object sender, RoutedEventArgs e)
            {
    btn1.Background = new SolidColorBrush(Colors.Green);
    }

    And coding for hower:

    private void btn1_PointerEntered_1(object sender, PointerRoutedEventArgs e)
            {
                btn1.Width = 600;
                btn1.Height = 300;
                btn1.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Right;
            }
    
            private void btn1_PointerExited_1(object sender, PointerRoutedEventArgs e)
            {
                btn1.Width = 400;
                btn1.Height = 200;
                btn1.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Right;
            }

    Monday, August 12, 2013 10:29 AM
  • Thanks Bro...That Was Quite Helpfull

    jDmAc Corp

    Sunday, August 18, 2013 7:05 PM
  • thanks but now the problem is i want to change margin of my button when mouse is hovered-:
    <Button x:Name="btn1" Content="Change Password" HorizontalAlignment="Left" Height="58" Margin="433,196,0,0" VerticalAlignment="Top" Width="351" FontSize="32" Background="#FF4AC71B" PointerEntered="btn1_PointerEntered_1" PointerExited="btn1_PointerExited_1"  />
    what code should i write ?

    jDmAc Corp

    Sunday, August 18, 2013 7:42 PM
  • Hello jDmAc,

    You can change margin of button when mouse is hover:

    <Button x:Name="btnhower" Content="hower to change margin" PointerEntered="btnhower_PointerEntered_1" PointerExited="btnhower_PointerExited_1"/>

    That code is:

    private void btnhower_PointerEntered_1(object sender, PointerRoutedEventArgs e)
            {
                btnhower.Margin = new Thickness(5);
            }
    
            private void btnhower_PointerExited_1(object sender, PointerRoutedEventArgs e)
            {
                btnhower.Margin = new Thickness(0);
            }

    Monday, August 19, 2013 4:18 AM
  • Hi jDmAc,

    I'd recommend customizing the template in blend to animate your modifications for the different VisualStates. This will ultimately be easier and more accurate than trying to do it in code, especially if you want any complicated changes (like it sounds like you do).

    --Rob

    Monday, August 19, 2013 4:50 AM
    Moderator