在Windows Phone 8.1上触摸时如何更改矩形颜色

Question

I 'm working on an app for wp 8.1 on C# and xaml (visual studio 2013).

I have a basic page that contains rectangles that function as buttons. These rectangles lead to other pages. My wish is that touching these transparent rectangles will change the color to blue.

<Rectangle  Fill="#FFD69F50" HorizontalAlignment="Left" Height="48" Margin="58,94,0,0" Stroke="Black" VerticalAlignment="Top" Width="73" Tap="h1_Tapped"/>

I have researched but cannot find the fix. Is my request possible?

Here is an example picture.

Answer 1

The easy way is to use a Button rather than a Rectangle. It sounds like your use is essentially button-ish so you're better off using a Button control which already implements Button semantics. Otherwise you'll need to add a lot of code to implement that yourself.

Specifically to your question, buttons handle PointerPressed events by shifting and changing their colour. By default this is to the user's theme colour, but you can edit the Button's template to pick your own colour and remove the shift.

To do so, right click on the Button in the designer (I like to do this in the Document Outline pane, since it's easy to find the right control there), and choose Edit Template.Edit a Copy... from the context menu. This will create a copy of the current template so you can edit it.

Look through the copied template and find the VisualState x:Name="Pressed" section. This controls the appearance of the button when it is pressed.

<VisualState x:Name="Pressed">
    <Storyboard>
        <PointerDownThemeAnimation Storyboard.TargetName="Grid"/>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Foreground" Storyboard.TargetName="ContentPresenter">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedForegroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
        <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Background" Storyboard.TargetName="Border">
            <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource ButtonPressedBackgroundThemeBrush}"/>
        </ObjectAnimationUsingKeyFrames>
    </Storyboard>
</VisualState>

By default this does three things:

1. Apply the PointerDownThemeAnimation to shift the button
2. Change the Background colour to ButtonPressedBackgroundThemeBrush
3. Change the Foreground colour to ButtonPressedForegroundThemeBrush

You can edit these to do whatever you'd like, including removing the animation and changing the target colours. I'd recommend leaving the colours as theme resources even if you define your own and letting the custom colours fall back to defaults in high contrast modes.

To allow the buttons to be small squares as in your picture, rather than the wider rectangles in your Xaml, you'll probably need to set the button's MinWidth property as well as its Width property.

If you really want to stick with Rectangles instead of Buttons then you'll need to write your own code to track the PointerPressed and PointerReleased events. On PointerPressed capture the pointer and set the new colour, and on PointerReleased reverse both of those.

Answer 2

private void rectControl_PointerPressed( object sender , PointerRoutedEventArgs e )
{
    rectControl.Fill = new SolidColorBrush(Colors.Blue);
}

private void rectControl_PointerReleased( object sender , PointerRoutedEventArgs e )
{
    rectControl.Fill = new SolidColorBrush(Colors.White);
}

or define a property in your viewModel and then bind the Fill property of rectangle with the defined property in viewModel.

private SolidColorBrush rectangleFill;
public SolidColorBrush RectangleFill
{
    get{ return rectangleFill;}
    set{ rectangleFill=value;
         NotifyPropertyChanged("RectangleFill");
       }
}

//Xaml code:

<Rectangle Fill={Binding RectangleFill}>