1

I want to create a toggle button which gives rise to a rectangular panel on clicking. Since rectangle is not having click property so I have enclosed it in a button. Please provide me further guidance.

 <Window x:Class="AnimatedRectangle.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" BorderBrush="Black" BorderThickness="2" Foreground="White" VerticalAlignment="Stretch" WindowStartupLocation="CenterScreen">
<Grid>
    <Button Name="MyButton">
        <Button.Template> 
            <ControlTemplate>
                <Rectangle
                    Name="MyRectangle"
                    Width="150" 
                    Height="30"
                    Fill="Cyan"
                    Margin="0,220,0,0">
                        <Rectangle.Triggers>
                            <!-- Animates the rectangle's opacity. -->
                            <EventTrigger RoutedEvent="Rectangle.Loaded">
                                <BeginStoryboard>
                                    <Storyboard>
                                        <DoubleAnimation
                                            Storyboard.TargetName="MyRectangle" 
                                            Storyboard.TargetProperty="Opacity"
                                            From="1.0" To="0.0" Duration="0:0:5" 
                                            AutoReverse="True" RepeatBehavior="Forever" />
                                    </Storyboard>
                                </BeginStoryboard>
                            </EventTrigger>
                        </Rectangle.Triggers>
                </Rectangle>
            </ControlTemplate>
        </Button.Template>
    </Button>
</Grid>

Please visualize it this way : Both the rectangle and button are of same width and initially the button overlaps(or hide in any other way)the rectangle. When the button is clicked then the rectangle appears and it looks like the rectangular body is part of a button.

JUST LIKE we press downward symbol in address bar and the history/suggestions appears in rectangular body. But here I want a button to give rise to a rectangle body rather than a downward symbol like in address bar.

StackOverflow is not letting me post images as I need to have 10 reputation posts :( Thanks a lot..!!

Vipul Sharma
  • 11
  • 7
  • do you want a "popup" behaviour? If so, check these out: http://stackoverflow.com/questions/20069686/wpf-popup-open-with-animation http://stackoverflow.com/questions/361209/how-to-open-a-wpf-popup-when-another-control-is-clicked-using-xaml-markup-only http://stackoverflow.com/questions/14252180/how-do-i-correctly-bind-a-popup-to-a-togglebutton – Arie Sep 02 '14 at 06:57
  • 1
    what do you mean by rise? you can post image elsewhere (eg imgur) and post links in the question/comments. – pushpraj Sep 02 '14 at 07:40
  • @pushpraj All I want is that the rectangle should appear to come out from the button. – Vipul Sharma Sep 02 '14 at 08:12
  • it is difficult to visualize the same, appreciated if you could post some sample images of rise & non-rise. – pushpraj Sep 02 '14 at 08:14
  • @pushpraj I'm really sorry as I can't post any image right now. However I have added more description, hope that might give you an idea what I want. – Vipul Sharma Sep 02 '14 at 08:55
  • are you looking for a 3D effect on the button? a raised button? – pushpraj Sep 02 '14 at 13:04
  • http://i1356.photobucket.com/albums/q728/Vips2112/doubt_zps42dacce2.png Well a 3D effect would be great :) – Vipul Sharma Sep 02 '14 at 20:32

0 Answers0