11 Replies - 678 Views - Last Post: 02 October 2013 - 06:57 PM Rate Topic: -----

#1 ScottinTexas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 13-March 12

Making things fit right

Posted 29 September 2013 - 08:39 AM

So now I am trying to put together a simple window. When open the window will take up all the available screen (Windows State Maximized). On that window I have a Grid with two rows. Row 1 is for a stack panel for buttons (Start, Stop, Whatever). Row 0 is for the rest of the screen. Row 0 is for a canvas on which an image brush displays a world map. When I add these items to the layout they are defined with static sizes, such as Height=263, Width=503. This flies in the face of what I have read about NOT sizing things so that the window works at any resolution. When I run the program my world map is in the upper left corner and takes up a fraction of the screen. The button stack panel is at the bottom. XAML Code below.

I want the image to fill the screen. I can't figure out how to make the height and width adjust to the available space, not static numbers. I am using VS 2010 Professional, Windows 7 Professional.

<Window x:Class="WorldClock.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="325" Width="525" Name="TopWIndow" 
        WindowStartupLocation="CenterScreen" 
        WindowState="Maximized">
   <window.Resources>
      
   </window.Resources>
   <DockPanel>
   <Grid  Background="#FF00006A">
      <Grid.RowDefinitions>
         <RowDefinition Height="263*" />
         <RowDefinition Height="23*" />
      </Grid.RowDefinitions>
      <StackPanel Name="ButtonPanel" 
                  Grid.Row="1" 
                  Height="23"
                  HorizontalAlignment="Left" 
                  VerticalAlignment="Top" Width="56">
         <Button Name="StartTime"
            Content="Start" 
                 Height="21" 
                 Width="43" 
                 Padding="0" 
                 HorizontalContentAlignment="Center" Cursor="Hand">
         </Button>
      </StackPanel>
         <Canvas Height="263" 
                 HorizontalAlignment="Left" Name="ClockCanvas" 
                 VerticalAlignment="Top" 
                 Width="503">
            <Canvas.Background>
               <ImageBrush ImageSource="/WorldClock;component/Winkel_triple_projection_SW.jpg" />
            </Canvas.Background>
         </Canvas>
      </Grid>
   </DockPanel>
</Window>




Is This A Good Question/Topic? 0
  • +

Replies To: Making things fit right

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9579
  • View blog
  • Posts: 36,291
  • Joined: 12-June 08

Re: Making things fit right

Posted 29 September 2013 - 10:29 AM

I am sort of following what you are saying (screen shots of different resolutions and show what you would want where would be nice), but you should investigate docking. Such as a 'dock panel'. It helps make controls relative to others depending on the viewable area.

http://msdn.microsof....dockpanel.aspx
Was This Post Helpful? 0
  • +
  • -

#3 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5677
  • View blog
  • Posts: 12,209
  • Joined: 02-June 10

Re: Making things fit right

Posted 29 September 2013 - 11:00 AM

Modi is right. Here's a tip: As soon as you start specifying width and height... You're probably in trouble. And using a Canvas like in line 33... bad news.

You want all your controls to self adjust to the space provided. At most you want to specify the RELATIVE size of container, like were you set the size of the grid row and column. But there really shouldn't be a need to specify the size/width of every control like you have right down to the button.
Was This Post Helpful? 0
  • +
  • -

#4 ScottinTexas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 13-March 12

Re: Making things fit right

Posted 29 September 2013 - 11:25 AM

I chose a canvas because on top of the displayed world map will be a vertical rectangle that moves from right to left. As far as my current understanding, to have animation I have to use other than a DockPanel. In fact the vertical rectangle will also have an ellipse that moves from top to bottom so I also used a canvas for the rectangle. When I drag the item from the Toolbox it automatically sets sizes. Since I don't even know how big my screen is, I can't use any settings. I was hoping I could use something like "Height=MainGrid.GridRow[0].Height" but that generates some errors. All of the reading I have done has my brain fried. If you want to animate something across the screen, how would you do it?
Was This Post Helpful? 0
  • +
  • -

#5 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5677
  • View blog
  • Posts: 12,209
  • Joined: 02-June 10

Re: Making things fit right

Posted 29 September 2013 - 01:45 PM

Quote

When I drag the item from the Toolbox ...

Well that's a big problem. Stop doing that. Drag and drop in WPF causes more work than it solves.

Just go to your XAML and type in what you need. Don't type more than you *HAVE* to specify.

Also... Stop naming every control you have. It was required in WinForms, but any time you have to name a control in WPF its a hint you're probably doing something wrong. The need for a named control in WPF is rare.

This
16      <StackPanel Name="ButtonPanel"
17                  Grid.Row="1"
18                  Height="23"
19                  HorizontalAlignment="Left"
20                  VerticalAlignment="Top" Width="56">



Can probably just be this
16      <StackPanel
17                  Grid.Row="1"
18                  Orientation = "Horizontal">


Was This Post Helpful? 0
  • +
  • -

#6 ScottinTexas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 13-March 12

Re: Making things fit right

Posted 29 September 2013 - 02:17 PM

Thanks. I found today that when I want a button on the stack panel the drag and drop kept putting it on the grid and it wasn't until I fought it a little that I noticed, in XAML, that it was in the wrong place.

Any comment on how to have the vertical rectangle move across the upper row?
Was This Post Helpful? 0
  • +
  • -

#7 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5677
  • View blog
  • Posts: 12,209
  • Joined: 02-June 10

Re: Making things fit right

Posted 29 September 2013 - 03:03 PM

View PostScottinTexas, on 29 September 2013 - 03:17 PM, said:

Thanks. I found today that when I want a button on the stack panel the drag and drop kept putting it on the grid


If you are going to drag, drag to the XAML not the designer. You can drop in the text cursor of the XAML - you don't have to drop on the designer.
Was This Post Helpful? 1
  • +
  • -

#8 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5677
  • View blog
  • Posts: 12,209
  • Joined: 02-June 10

Re: Making things fit right

Posted 29 September 2013 - 04:50 PM

View PostScottinTexas, on 29 September 2013 - 03:17 PM, said:

Any comment on how to have the vertical rectangle move across the upper row?


I haven't done much with animation. I toyed a little. I do recall that using Blend made it a lot easier.
Was This Post Helpful? 0
  • +
  • -

#9 Curtis Rutland  Icon User is offline

  • (╯□)╯︵ (~ .o.)~
  • member icon


Reputation: 4577
  • View blog
  • Posts: 8,019
  • Joined: 08-June 10

Re: Making things fit right

Posted 30 September 2013 - 08:26 AM

For animations you use a Storyboard. That lets you define a timeline for your animations. It's not a simple thing, so I suggest finding some tutorials on using it.
Was This Post Helpful? 0
  • +
  • -

#10 ScottinTexas  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 45
  • Joined: 13-March 12

Re: Making things fit right

Posted 01 October 2013 - 04:28 AM

Thanks Curtis. I have the general idea and I have been doing a lot of reading. I have a book and have researched a lot on the web. The one thing that is not made clear about is the basic structure. One example I went through uses a single canvas and places several ellipses on it and makes them spin. Another used a single canvas and a box is constructed using a zillion points and as it rotates it forms itself and then deforms itself. Great stuff for a tutorial but both of these examples fail to discuss the basic layout. So mostly what I am trying to work out now is how to structure the layout. This book I have talks about the need to layout in relative terms and every single example uses a fixed size window and margins and padding to make things fit. Since my little project is a clock and instead of hands the time is displayed in a label while the sun moves from East to West I need some precision so that noon in Texas does not have the sun over France. So I structured the layout like this;

Main Window
Grid with three rows
Grid Row 0 - A place for the Longitude Ticks (still trying to figure out how to do this).
There are 360 tickmarks from 0 to 180 on the left and 180 to 0 on the right. But these have to be spaced according to the width of the screen, not fixed to a specific window size. The Earth expands when the Maximized button is clicked (I have it set to stretch). But the sun (which should start at the 0 longitude - the prime meridian) ends up moving to the North Pacific.
Grid Row 1 - A canvas to display the map of the earth and home to the ellipse that represents the sun.
I started out by putting the sun in a rectangular canvas that would move across the Earth but took it out of the canvas. I just need to tie the position the sun with data binding. Somehow I need to pass the position from the calculation to the object at runtime. There is a very harry calculation that needs to be used to position the sun over the correct Latitude depending on the number of days since the winter solstice. (That will be the Y value) and Zulu or UTC time (that will be the X value) scaled to fit the screen. Do I need a storyboard for that or can't I just update the position of the ellipse based on the calculation. Run a time in code behind to keep track of the time.
Grid Row 2 - A Stackpanel - A place for time labels, date label, Exit button, etc.

This shouldn't be too big a deal. Just need to be able to address my object from code and make things fit right at runtime.
Was This Post Helpful? 0
  • +
  • -

#11 Skydiver  Icon User is online

  • Code herder
  • member icon

Reputation: 3663
  • View blog
  • Posts: 11,482
  • Joined: 05-May 12

Re: Making things fit right

Posted 01 October 2013 - 05:48 AM

I'll ask the silly question: Why not render everything in a particular canvas off screen that has the dimensions that you want to work in, take a snapshot, and then let the system scale the snapshot into the screen size that you want?
Was This Post Helpful? 0
  • +
  • -

#12 tlhIn`toq  Icon User is offline

  • Please show what you have already tried when asking a question.
  • member icon

Reputation: 5677
  • View blog
  • Posts: 12,209
  • Joined: 02-June 10

Re: Making things fit right

Posted 02 October 2013 - 06:57 PM

Again that's rendering to a specific size/resolution. That's the opposite of the concept behind WPF which is supposed to be self adjusting, self resizing, and completely resolution independent.

Its nice when the app does the work automatically for you. Is the user on a 1920x1200 monitor? 1920x1080? 800x600? 900x480 embedded PC? Do they have the OS scaling set to 150%? Outputting to a multi-monitor array billboard that is 400,000 x 150,000? High res smartphone? Low res smartphone. Landscape orientation or portrait?

Not to mention its easy to apply scaling transforms to just certain panels. For example, assume you have an older person using your app. Wouldn't it be nice if they could just slide a slider in the status bar up scale-up the display in one panel so their old tired eyes can see it?

We seem to be covering a lot of the same stuff as in this thread, where I shared an example of doing that scaling.
http://www.dreaminco...ood-gui-design/
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1