Develop Reference

Using multiple frame in a wpf window

I'm developing an application using WPF by c#.
I have 2 frames next to each other. The above will not change and just updated(like Facebook toolbar).
The bottom frame will change by clicking on some buttons. (it is something like masterpage in ASP).
I don't want to set a height and width for window or for frames. The problem is when I make the window full screen there is a space between two frames.
However none of the vertical/horizontal alignment stretch does not work.
<window>
<Frame VerticalAlignment="Top" Background="Crimson" />
<Frame VerticalAlignment="Bottom" Background="Black"
/>
</Window>
I want to create something like the this site as you see. the notify section and the main page.
EDIT:
i can put them next to each other just by set the height, but when i make full the window the heights stay and the yellow space becomes appear, so i want to find a way to put them Exactly next to each other in every window size.

As Mitch noted in the comments, you could place the two frames in a grid instead, and let the grid size the items.
<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>
</Window>

<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Frame Grid.Row="0" Background="Crimson" />
<Frame Grid.Row="1" Background="Black" />
</Grid>

Including adunit in TopAppBar

I want to add an adunit to the TopAppBar of the page.
<Page.TopAppBar>
<AppBar IsOpen="True">
<UI:AdControl
AutoRefreshIntervalInSeconds="60"
ApplicationId="be1500d6-9ca7-4a0b-a479-0db279d71e14"
AdUnitId="11191335"
HorizontalAlignment="Center"
IsAutoRefreshEnabled="True"
VerticalAlignment="Top"
Width="320"
Height="50" IsAutoCollapseEnabled="True"
/>
</AppBar>
</Page.TopAppBar>
This compiles and runs without error but after adding this to my code, the Frame.Navigate to this page is returning a false value.
How to correct it so that Navigation is successful? If this is not the right way then how can I make my ad stay on the top of the page always even on scrolling.

Windows Phone doesn't support a top AppBar. If you want to show your add at the top of the page then put it in a row of a Grid at the top of the page. Put the page content you want to scroll in a second row underneath it. Something like:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<UI:AdControl Grid.Row="0" />
<GridView Grid.Row="1" /> <!-- or whatever else you want for the page content -->
</Grid>

WPF Designer - Selecting element inside element

I am new to WPF so I would accept every piece of advice. My problem:
I use the Designer to put different components of the UI the way I like. And it's great. The problem came with this type of XAML structure:
<Window>
<Grid>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
/* Couple of buttons */
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="223*"/>
<RowDefinition Height="99*"/>
</Grid.RowDefinitions>
<TabControl Margin="85,0,0,0" Padding="0,-5,0,0" Grid.RowSpan="2">
<TabItem Visibility="Collapsed">
<Grid>
/* textboxes and labels */
</Grid>
</TabItem>
<TabItem Visibility="Collapsed">
<Grid>
<Border Visibility="Hidden" Margin="136,66,76,66" Panel.ZIndex="10" BorderThickness="1" Width="320" Height="180">
<Grid Background="White">
<Grid.Effect>
<DropShadowEffect BlurRadius="10" RenderingBias="Quality" Direction="270" ShadowDepth="3" Opacity="0.1"/>
</Grid.Effect>
/* labels, textboxes and buttons */
</Grid>
</Border>
<TabControl Margin="0,0,0,38">
<TabItem>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
/* other elements */
</Grid>
</TabItem>
<TabItem>
<Grid>
<Grid>
/* checkboxes */
</Grid>
<Grid>
/* checkboxes */
</Grid>
/* labels */
</Grid>
</TabItem>
<TabItem>
<Grid>
</Grid>
</TabItem>
</TabControl>
/* buttons and labels */
</Grid>
</TabItem>
</TabControl>
</Grid>
</Grid>
Usually when I want to move something on the scene I just select it and drag / change it since it's a lot easier than just writing it in XAML. However, using the code above, if I want to select something from the inner TabControl I just can't. It automatically selects the one above which makes it a bit harder to manage the UI. My guess it's something to do with the Z-Index but I'm not really sure. I know it is probably a noobish question but it makes me struggle so I will be very thankful if someone explains this to me!
Thanks!

Well my guess is you have grids layered on top of each other that are capturing the clicks and preventing the selection of the elements below (z-order like you mention).
A few things to note
This isn't really specific to the designer, if you have Hit Testable elements layered on top of each, even if they look transparent, they will still capture the click and "steal" focus. You can do various things to prevent this, one option might be setting IsHitTestVisible=false on elements that you want clicks to "pass through" to elements below it. Another option is to set the Background of an element to {x:Null}, instead of the default (which is Transparent).
You can use the Document Outline panel probably on the left hand side of your VS window (or View | Other Windows | Document Outline) to navigate the Visual Tree...visually. This would allow you to "select" an item even it is underneath other items. However, even once it is selected in the document outline it won't be floated to the top of the design surface, so you won't be able to drag it around to position it, but you will be able to grab re-size handles and access the properties window for the selected element.
Ultimately you have to "hide" the element that is on top of it to get the drag positioning you want.

I had the same issue - I was busy laying out my app in the WPF designer, and things that I could move around before were unselectable and undraggable, with the TabControl always stealing focus.
The issue seems to be with the TabItem being Collapsed. I found it impossible to select anything inside a TabItem that had Visibility="Collapsed".
If you need to move things around try changing the visibility to Visible temporarily - I was able to move things around in the designer and then later set the visibility back again.
I haven't tested this particularly thoroughly and it's a bit of a kludge, but it worked well enough for me to do the layout.

expander overflows

c# vs2010
hi all:
how can I bring to focus on a window all controls hidden on expander.
expander is collapsed at the bottom of the window,
when i click on it to expand it (i have to scroll down,'cause controls are not showing on the window), I would like to bring into focus the first control and be able to see the last control on the window without manually scrolling.
any ideas how to accomplish this task on Xaml or code behind.
thanks

<Window>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<ScrollViewer>
<!-- lol stuff here -->
</ScrollViewer>
<Expander Grid.Row="1">
<TextBlock>Wow! You don't have to scroll to see me!</TextBlock>
</Expander>
</Grid>
</Window>

WPF - Resizing controls within a window with resize

So I'm pretty new to WPF and I'm having trouble with the layout of my Window. Currently I have a WPF application with a Grid defined as such:
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
In the very top row, spanning two columns, I have a Menu. In the second row I have some Labels in the first column and an Image and a WindowsFormsHost in the second, finally, in the third row I have a graphing control in the second column. By default, I set the size of the Image and WFH to 570 x 413. Now, I'd like for both the Image and WFH to expand when my Window is resized such that they maintain the same relative (to the Window) size. (I actually would like the same to happen to my graphing control as well, but I can probably figure that one out if I can get the others. I cannot for the life of me figure out what setting I need to turn on/off or what I might need to bind or whatever in order to make this happen. Any help is greatly appreciated!
Thanks!

Have you tried:
<RowDefinition Height="*" />
Make sure to assign your Grid.Row within your image or control, but do not sign the controls height/width properties. The control should autosize with expansion.
Update
Did a quick test to make sure this works.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="23"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="Example"/>
<Image Grid.Row="1" Source="c:\Example.jpg"/>
<Label Grid.Row="2" Content="Example2"/>
</Grid>
The image expands with the application based on the image's proportions. It does expand, but it keeps it's dimensions along with the full image in view. If you were to change the rowdefinition from ***** to Auto, you will notice that the image will expand, but it will expand past your view. Meaning you will not always see the full image.
I would suggest making a simple application like above, and playing with constraints to figure out what each does.

You need to show more information in your description, because all of the properties of the Grid and of the Image, etc. will factor into the layout.
However, you probably want to look at the HorizontalAlignment and VerticalAlignment properties of your Grid and of your Image, as well as the Stretch property of the Image. Also, you don't want to specify a fixed size for the image (you can specify a MinWidth and a MinHeight if you want them to be a certain size when starting up).
Here's a quick example that shows a grid filling a window, with a scaling image.
<Grid HorizontalAlignment="Stretch"
VerticalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="23" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" Grid.Row="0" Grid.ColumnSpan="2" Content="First Row" />
<Label Grid.Column="0" Grid.Row="1" Content="Column 0, Row 1" />
<Image Grid.Column="1" Grid.Row="1"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
Source="Resources\ExamplePicture.png"
Stretch="Uniform" />