locked
C# Metro (XAML) : Designing the page for any (% of the) screen RRS feed

  • Question

  •        

    This is my first post on this forum, so please forgive me if I have posted on the wrong section.

    I have created a media player that has on it's MainPage two (main) things : a ListView (for the playlist) on the right side of the page and a MediaElement that covers the right side of the screen (for both audio and video). Also, the bottom of the page is empty because I'm using a AppBar on which I have the controls (Play, Pause, Stop, Volume, Next,Previous, Shuffle, Repeat, FullScreen etc.). Above the ListView I have 4 buttons for adding/removing files from the ListView.

     The problem is :

     1. when the app is only on a half of the screen:
       - the width of the ListView is very small and the title of the song/video is on 4-5 lines
       - the width of the MediaElement is also very small and it loses the parts of the video + it destroys the aspect ratio 
     2. when the app is only on 1/4 (a quarter) of the screen:
       - the width of the ListView is extremely small and I can't see more than 2-3 songs without scrolling
       - I see only half of the video that is playing on the MediaElement
       - the buttons on the AppBar are colliding
       - the buttons on the top of the ListView are taking a 1/3 (a third) of the screen

    To explain a bit about the design of my page:

    - there is a Grid for the entire page with two rows : on the first Row there is the main Grid for everything on the screen and the second Row is just space for the AppBar

    <Grid.RowDefinitions>  
         <RowDefinition Height="6*" />       
         <RowDefinition Height="*" /> 
    </Grid.RowDefinitions>



    - there is the main Grid I was talking about previously with two columns for the entire page :

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



    - on the first column of the page I have the MediaElement with `Width="800" Height="450"` . I know that using pixels to set the width and the height is not a good idea but I didn't know how to do it in another way
    -on the second column I have another Grid with 2 Rows :

    <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
    </Grid.RowDefinitions>




    - the first Row contains a VariableSizedWrapGrid with the 4 buttons on the top of the ListView
    - the second Row contains the ListView (Margin="6,20") with the template:

    <ListView.ItemTemplate>
          <DataTemplate>
              <StackPanel>
                 <TextBlock Text="{Binding Title}" FontSize="24" Margin="5,0,0,0" TextWrapping="Wrap" />
                 <TextBlock Text="{Binding Duration}" FontSize="16" Margin="15,0,0,0"/>
               </StackPanel>
           </DataTemplate>
    </ListView.ItemTemplate>
       



    I also have the AppBar that contains a 2 rows Grid:


    <Grid.RowDefinitions>
          <RowDefinition Height="Auto" />
          <RowDefinition Height="*" />
    </Grid.RowDefinitions>



    - on the first Row I have a Slider :

    <Slider Grid.Row="0" x:Name="TimelineSlider" Width="1000" x:FieldModifier="public" ThumbToolTipValueConverter="{StaticResource TimeSliderPositionConverter}"/>


       (the slider also hates the Width="1000" property, especially when it's on 1/4 of the screen)

    - on the second Row I have another Grid with two column, each containing a StackPanel of buttons :

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

    I was hopping something like : 

    * at 1/2 of the screen : the MediaElement to be on the top of the page and the ListView with the 4 buttons on the bottom of the page
    * at 1/4 pf the screen : only the ListView and the button above it to be visible

    I've seen apps on the Windows Store that can change a lot from full screen to 1/2 of screen, so it's possible. 

    Please help me with this guys, I'm not a designer, but I want my application to look good on any % of the page. 

      

    • Moved by CoolDadTx Friday, December 20, 2013 6:07 PM WinRT related
    • Edited by ArchTM Saturday, December 21, 2013 12:11 AM
    Friday, December 20, 2013 6:01 PM

Answers

  • You can define VisualStates for the different aspect ratios and switch between them when the window size changes. Quickstart: Designing apps for different window sizes discusses and demonstrates this.

    Give that a read and let us know if you still have questions on this.

    --Rob

    • Marked as answer by ArchTM Saturday, December 21, 2013 12:33 AM
    Friday, December 20, 2013 6:49 PM
    Moderator

All replies

  • You can define VisualStates for the different aspect ratios and switch between them when the window size changes. Quickstart: Designing apps for different window sizes discusses and demonstrates this.

    Give that a read and let us know if you still have questions on this.

    --Rob

    • Marked as answer by ArchTM Saturday, December 21, 2013 12:33 AM
    Friday, December 20, 2013 6:49 PM
    Moderator
  • Well, the page lacks a lot of information, but it certainly gave me a strong start. Thank you very much for the help given. 


    • Edited by ArchTM Saturday, December 21, 2013 12:33 AM
    Saturday, December 21, 2013 12:14 AM