How to develop an Windows Stroe Mail Style app

Question

The Responsive UI,I know the VisualStateManager can do this work.Bu I don't know how to do

In wide mode, It have two columns.The First column show a list and the second show the content in the same page

And in narrow mode, it only show one thing one time in a page and whit the navigation. Just like the Win10 Mail app.

Thanks so much

score 0 · Accepted Answer · answered Sep 27 '15 at 07:49

Here's a XAML code for that :

  <Grid Background="White">
    <VisualStateManager.VisualStateGroups>
        <VisualStateGroup x:Name="VisualStateGroup">
            <VisualState x:Name="VisualStateNarrow">

                <VisualState.Setters>
                    <Setter Target="emailDetails.(UIElement.Visibility)" Value="Collapsed"/>
                    <Setter Target="emailsList.(Grid.ColumnSpan)" Value="2"/>
                </VisualState.Setters>
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="1"/>
                </VisualState.StateTriggers>
            </VisualState>


            <VisualState x:Name="VisualStateExtended">
                <VisualState.StateTriggers>
                    <AdaptiveTrigger MinWindowWidth="700"/>
                </VisualState.StateTriggers>
            </VisualState>
        </VisualStateGroup>
    </VisualStateManager.VisualStateGroups>

    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="340" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>

    <!-- Emails List -->
    <Grid x:Name="emailsList" Background="LightBlue" >
        <TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Nothing to show!" />
    </Grid>

    <!-- Email Details -->
    <Grid Grid.Column="1" x:Name="emailDetails" Background="Blue" >
        <TextBlock HorizontalAlignment="Center" Foreground="White" VerticalAlignment="Center" Text="Select email to show!" />
    </Grid>

</Grid>

I've set '700 px' as a min width for the Extended state, you can change it by : <AdaptiveTrigger MinWindowWidth="700"/>

Thanks. It's really very nice code. And I don't know why `VisualStateExtended` doesn't have a `VisualState.Setters`, but it really works. — startewho, Sep 27 '15 at 13:39
You don't have to assign the setters for your main/ default design -or state- :) . — Nasser AlNasser, Sep 27 '15 at 17:31
@startewho Please accept it as answer to help others get it quickly :) — Nasser AlNasser, Oct 08 '15 at 08:16

How to develop an Windows Stroe Mail Style app

1 Answers1