Develop Reference

Window size does not match what I have in the designer

I'm not sure why it seems that every time I work with WPF, things are always much more difficult that WinForms or C/SDK.
In this case, the window looks like this in the designer.
But here's how it looks at run time.
And my XAML:
<Window x:Class="InsiderArticlesManager.AuthorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:InsiderArticlesManager"
mc:Ignorable="d"
Title="Set Author" Height="114" Width="341" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" SourceInitialized="Window_SourceInitialized" WindowStyle="SingleBorderWindow">
<StackPanel>
<Label Name="lblPrompt" Content="Select Author:" Margin="5,5,5,0" />
<ComboBox Name="UserList" DisplayMemberPath="Email" Margin="5,0,5,5"></ComboBox>
<WrapPanel HorizontalAlignment="Right">
<Button Name="btnOk" Content="OK" Width="78" Margin="5,5,0,5" IsDefault="True" Click="Ok_Click" />
<Button Name="btnCancel" Content="Cancel" Width="78" Margin="5,5,5,5" IsCancel="True" />
</WrapPanel>
</StackPanel>
</Window>
I thought the whole point of the designer was so that I could see how the window will look. Since it shows me something different, how do I know what size to set it?

You might want to set the Width and Height on the StackPanel and set the Window's SizeToContent to WidthAndHeight. That way the content is always visible, no matter the size of the window border (assuming you size your StackPanel correctly :)):
<Window x:Class="InsiderArticlesManager.AuthorWindow"
...
SizeToContent="WidthAndHeight">
<StackPanel Height="114" Width="341">
...
</StackPanel>
</Window>
In your case the difference between design time and runtime occurs because the XAML designer window has a smaller window border size.

WPF page content not setting to window's size

I made a WPF application in which. I placed a rectangle. The page is covering whole window but the size(width) of rectangle is not equal to the page.
here is the pic.
here is the source code of my application:
<Page x:Class="TestWpfApplication.Page1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:TestWpfApplication"
mc:Ignorable="d"
d:DesignHeight="350" d:DesignWidth="525"
Title="Page1" Background="#FF7ACBBC" ShowsNavigationUI="False">
<Grid>
<Rectangle Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="100" Stroke="Black" VerticalAlignment="Top" Width="525"/>
<Label x:Name="label" Content="Heading" HorizontalAlignment="Left" Margin="222.006,25,0,0" VerticalAlignment="Top" FontFamily="Tahoma" FontSize="22"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="160,155,0,0" TextWrapping="Wrap" Text="And rest of the content goes here" VerticalAlignment="Top" FontFamily="Tahoma" FontSize="14"/>
</Grid>
And
<Window x:Class="TestWpfApplication.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:TestWpfApplication"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:Page1/>
</Grid>
At last App.xaml
<Application x:Class="TestWpfApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:TestWpfApplication"
StartupUri="page1.xaml">
<Application.Resources>
</Application.Resources>
Please help me....

Set SizeToContent Property of Window to SizeToContent="WidthAndHeight"
SizeToContent

Page1.Xaml.cs:
public Page1()
{
InitializeComponent();
this.SizeToContent = SizeToContent.WidthAndHeight;
}
For more Info, See Window.SizeToContent Property

I don't know why you specified size parameters for rectangle and expect it to fit your page's size. Just remove all these parameters and it will stretch.
<Rectangle Fill="#FFF4F4F5"/>

WPF Extended Toolkit Control in Custom Control not pulling through to form?

I am using the Xceed Extended WPF Toolkit for the Integer Up Down Control. I have installed this via Nuget.
I have the integrated into a custom control which contains other normal textboxes and button etc.
This custom control I then put in a tab control on a Window. Everything shows correctly apart from this IntegerUpDown which shows as an empty box. (It is fine when looking at the custom control in design)
I have added the namespace to both the control and window so am not sure what the problem is. Everything is inside one project so I don't think references are a problem.
Any ideas of what I could be missing?
Control XAML:
<Label Grid.Row="3" Content="Quantity of Tickets:" VerticalAlignment="Center"></Label>
<xctk:IntegerUpDown Grid.Row="3" Grid.Column="1" Name="numTickets"></xctk:IntegerUpDown>
Form XAML:
<TabItem Header="New Booking">
<Grid Background="#FFE5E5E5">
<btc:NewBooking></btc:NewBooking>
</Grid>
</TabItem>
Thanks,
Ryan

Here's a MCVE:
MainWindow:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApplication8"
x:Class="WpfApplication8.MainWindow"
mc:Ignorable="d"
Title="MainWindow" Height="300" Width="300">
<Grid>
<TabControl x:Name="tabControl" Margin="0">
<TabItem Header="TabItem 1">
<Grid Background="#FFE5E5E5">
<local:UserControl1></local:UserControl1>
</Grid>
</TabItem>
<TabItem Header="TabItem 2">
<Grid Background="#FFE5E5E5"/>
</TabItem>
</TabControl>
</Grid>
UserControl:
<UserControl x:Class="WpfApplication8.UserControl1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit"
xmlns:local="clr-namespace:WpfApplication8"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<StackPanel>
<Label Grid.Row="3" Content="Quantity of Tickets:" VerticalAlignment="Center"></Label>
<xctk:IntegerUpDown Grid.Row="3" Grid.Column="1" Name="numTickets"></xctk:IntegerUpDown>
</StackPanel>
</Grid>
Both MainWindow and UserControl are at the same level in the project structure:
EDIT: One more thing, make sure your UserControl is fully contained by the MainWindow and you do NOT have something like this:
That would cause the IntegerUpDown look like an empty box, like you described.

Why tabitem do not show view

I am workign on MVVM, and i have Main View in which i have a tabcontrol and 3 tabitems. Now on click to each tabitems i want to display a new view. (I have three Views).
My try to do that is :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vm1="clr-namespace:WpfApplication1"
xmlns:vm2="clr-namespace:WpfApplication1"
xmlns:vm3="clr-namespace:WpfApplication1"
Title="MainWindow" Height="350" Width="525">
<Window.Resources>
<vm1:View1 x:Key="View1Display1"></vm1:View1>
<vm2:View2 x:Key="ViewDisplay2"></vm2:View2>
<vm3:View3 x:Key="ViewDisplay3"></vm3:View3>
</Window.Resources>
<Grid x:Name="LayoutRoot" Background="White">
<TabControl Background="Green">
<TabItem Height="20" Width="100" Header="Tab1" DataContext="{Binding Path=View1Display1}"></TabItem>
<TabItem Height="20" Width="100" Header="Tab2" DataContext="{Binding Path=View1Display2}"></TabItem>
<TabItem Height="20" Width="100" Header="Tab3" DataContext="{Binding Path=View1Display3}"></TabItem>
</TabControl>
</Grid>
</Window>
Where View1 is : (Similar is View2 and View3)
<UserControl x:Class="WpfApplication1.View1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<Grid>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center">I am from View1</TextBlock>
</Grid>
</UserControl>
MainWindow.xaml.cs is :
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
this.DataContext = new ViewModel();
}
}
This is ViewModel:
class ViewModel
{
public ViewModel()
{
}
}
Why TabItem do not show the respective views on clicking to them even i have set datacontext corresponding to their View.

Instead of binding the DataContext on each TabItem, you need to bind the Content, and then you can bind each TabItem to an instance of its ViewModel, of Do that in the UserControls them selfs
<TabControl Background="Green">
<TabItem Height="20" Width="100" Header="Tab1" Content="{StaticResource View1Display1}"></TabItem>
<TabItem Height="20" Width="100" Header="Tab2" Content="{StaticResource ViewDisplay2}"></TabItem>
<TabItem Height="20" Width="100" Header="Tab3" Content="{StaticResource ViewDisplay3}"></TabItem>
</TabControl>
since your views are defined as static resource use StaticResource instead of binding

silverlight content set more than once

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:dataInput="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.Input" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="OrgChart.MainPage" mc:Ignorable="d" d:DesignHeight="500" Width="1264">
<ScrollViewer x:Name="MyScoller" Background="White" Margin="0,0,-102,28">
<Canvas Canvas.Left="-30" Canvas.Top="-70" Height="100" Name="MyCanvas" Width="260" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible" />
</ScrollViewer>
<TextBox Height="23" Name="ara" Canvas.Left="59" TextWrapping="Wrap" Text="TextBox" Canvas.Top="-106" Width="120" />
</UserControl>
It shows set more than once error when I add textbox. If I add textbox into canvas, it doesn't give error. But I want to add outside of canvas. How can I handle on it?

In Silverlight you have two main classes of elements: Controls and Panels.
A Control can have only one child element (UserControl is a Control).
A Panel can have any number of child elements (Grid, StackPanel, Canvas are Panels).
If you want to place a TextBox below your ScrollViewer you can place them both inside a StackPanel:
<UserControl>
<StackPanel>
<ScrollViewer .../>
<TextBox .../>
</StackPanel>
</UserControl>