CODEWITHSUNDEEP
c#xamlwindows-8microsoft-metro
Carmelo Dascola
Carmelo Dascola

Reputation: 55

Combobox style windows metro app

I'm developing a xaml/c# metro style app in windows 8. I'd like to emulate the Microsoft Calendar app comboBox Style (In the event details page). I mean, having that behavior of coloured box and border after selection. How can I do it using visual states?

Upvotes: 0

Views: 1534

Answers (2)

Dominik Weber
Dominik Weber

Reputation: 427

Something like this should work:

<Combobox.Template>
    <ControlTemplate>
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FocusStates">
                <VisualState x:Name="Unfocused"/> <!--leave the unfocused state empty if the control already looks "unfocused" -->
                <VisualState x:Name="Focused">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="background" Storyboard.TargetProperty="Opacity" To="0.2" Duration="0"/>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>

        <Border x:Name="background" Background="Red" Opacity="0" />
        <!--other stuff-->
    </ControlTemplate>
</Combobox.Template>

The Combobox control automatically switches it's built-in states according to mouse/keyboard input like focused, pressed, mouse over etc. By switching a state the storyboard that was defined for the current state will be reversed and the storyboard that you have defined for the new state will be applied. You can review the available states here: http://msdn.microsoft.com/en-us/library/ms752094.aspx

(Using code-behind you can also implement your own states based on events and such, but this should be rarely needed.)

Upvotes: 0

Igor Kulman
Igor Kulman

Reputation: 16361

There is no standard control for this, you have to create your own / extend the standard combobox

Upvotes: 1

Related Questions