In my first attempts to work with WPF I encountered a problem where coordinates that I choose in designer's view for buttons are different in what I see when I compile my program. Here's how it looks like:
Buttons are a little bit lower (cropped) in compiled version. Any ideas on what is happening here?
Code:
<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" mc:Ignorable="d" x:Class="Player.MainWindow"
Title="Player" ResizeMode="CanMinimize" StateChanged="Window_StateChanged" Icon="Resources/radio.ico" WindowStartupLocation="Manual" Closing="Window_Closing" Left="0" d:DesignWidth="448" d:DesignHeight="110" Width="448" Height="110">
<Grid Margin="0">
<Grid.RowDefinitions>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Button x:Name="nextButton" Content="Next" HorizontalAlignment="Left" Margin="32,38,0,0" VerticalAlignment="Top" Width="45" Click="nextButton_Click" Height="22"/>
<TextBox x:Name="prevButton" HorizontalAlignment="Left" Height="23" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="209" IsEnabled="False" TextAlignment="Center"/>
</Grid>
</Window>
I opened up GIMP and put your images on top of each other, with the top of having 50% transparency and this is the result:
And voila - the XAML designer and the compiled output is identical. I would even assume that VS designer displays some sort of background-compiled version of your XAML to achieve this high-fidelity representation.
Back to your edited question: according to this question: Why is a window larger in runtime? you need to set the width/height on the Grid and set the SizeToContent attribute of the Window to WidthAndHeight.
Here is an updated version of your code:
<Window (...)
SizeToContent='WidthAndHeight'>
<Grid
Height='110'
Width='448'
Margin="0">
(...)
And the result is:
Related
I want to create an Indeterminate progress bar that keeps on loading until a certain task finishes. However, it currently does not look like the default progress bar that I knew, colored green and thick, even though I haven't made any changes in this regard. This is how it looks:
actual dialog
<Window x:Class="Contributor.AnalyticsSyncDialog"
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" mc:Ignorable="d"
WindowStyle="None" WindowStartupLocation="CenterScreen" Height="70" Width="250" Background="#EEEEEE" Loaded="AnalyticsSync_OnLoaded" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Text="Saving Components..." Height="18" Margin="5" Background="Transparent"/>
<ProgressBar x:Name="Bar" IsIndeterminate="True" Background="Transparent" Grid.Row="1" Height = "5" Margin="5,10"/>
</Grid>
</Window>
Moreover, the preview within the designer looks as I'd expect it to be.
expected dialog
What could be the cause of this discrepancy?
I have a custom designed window as shown below.
Custom Window
The following is my XAML design with the styles omitted for simplicity.
<Window x:Class="CustomWindowBase.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:CustomWindowBase"
mc:Ignorable="d"
Title="CustomWindow" Height="600" Width="870" WindowStartupLocation="CenterScreen"
ResizeMode="NoResize" AllowsTransparency="True" WindowStyle="None" Background="Transparent">
<Border Style="{StaticResource MainWindowBorderStyle}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="35"/>
<RowDefinition Height="590*"/>
</Grid.RowDefinitions>
<Border Grid.Row="0" Style="{StaticResource TitleBarBorderStyle}">
<Grid>
<TextBlock Style="{StaticResource TitleStyle}" Text="Custom Window"/>
<Button x:Name="BtnClose" Style="{StaticResource CloseButtonStyle}"/>
</Grid>
</Border>
<Grid Grid.Row="1">
<!-- Different User Control Here -->
</Grid>
</Grid>
</Border>
</Window>
There's two events for the code behind of this window that supports the close/drag action.
How can I reuse this shell for every other window that my application will potentially open, sort of like a base class that can be inherited?
If at all possible, I wouldn't want to do much in the code behind, like instantiating an instance of this window shell and assigning it's content with another user control.
Your help is much appreciated.
Put the XAML stuff in a ControlTemplate.
For the <!-- Different User Control Here --> part, insert a <ContentPresenter />. It knows what to do. It just knows.
Apply the template, and the other desired property values, with a Style.
If I got you right, then it's fine. Call it from outside the window with
new MainWindow().ShowDialog();
First of all it's my first day using Xaml so this question might be dummy for you, but i totally got lost.
Overview
My technique is that i have MainWindow.xaml and it's split into three areas (using grid columns) the columns width being set automatically.
Based on some actions in the right column, the middle column with show a page let's say Page.xaml that exists in different namespace.
What i'm seeking for
The problem is i need to set the width and height for this page to be equal the middle column width and height as it will fit this area.
Notes
I have very small experience with xaml and binding techniques.
MainWindow.Xaml
<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" mc:Ignorable="d"
WindowState="Maximized"
ResizeMode="NoResize"
WindowStartupLocation="CenterScreen"
Title="MainWindow" d:DesignWidth="1366" d:DesignHeight="768">
<Grid x:Name="MainGrid">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1.2*" x:Name="LeftColoumn" />
<ColumnDefinition Width="3*" x:Name="CenterColoumn" />
<ColumnDefinition Width=".8*" x:Name="RightColoumn" />
</Grid.ColumnDefinitions>
<ScrollViewer Grid.Column="2">
<StackPanel Orientation="Vertical" x:Name="RightStackPanel" Background="LightGray" >
<Border BorderBrush="{x:Null}" Height="50" >
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap" FontWeight="SemiBold" FontStyle="Normal" Margin="3" FontSize="20" >Others</TextBlock>
</Border>
<Expander x:Name="Expander1" Header="Others" Margin="0,0,10,0">
<Button Margin="0,0,0,0" Width="{Binding ActualWidth, ElementName=RightStackPanel}" Background="White" Content="Add" Height="50" Click="Button_Click" ></Button>
</Expander>
</StackPanel>
</ScrollViewer>
<Frame Grid.Column="0" x:Name="LeftFrame" Background="LightGray" ></Frame>
<Frame Grid.Column="1" x:Name="CenterFrame" Background="DarkGray" ></Frame>
</Grid></Window>
Other Xaml file
<Page
x:Name="Page"
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"
Title="Any" d:DesignWidth="1364" d:DesignHeight="868"
>
<Grid>
<Frame Background="DarkGray" />
</Grid></Page>
MainWindow.xaml.cs
private void Button_Click(object sender, RoutedEventArgs e)
{
Frame middleFrame=CenterColumn;
Otherxaml other=new Otherxaml();
middleFrame.Source = new Uri("OtherxamlPage.xaml", UriKind.RelativeOrAbsolute);
}
Pertinent to your code snippet, you may place the OtherxamlPage.xaml inside the central frame and set the properties of that frame like shown below:
<Frame Grid.Column="1" x:Name="CenterFrame" VerticalAlignment="Stretch" VerticalContentAlignment="Center" HorizontalAlignment="Stretch" HorizontalContentAlignment="Center" Source="OtherxamlPage.xaml" Background="DarkGray" />
You can set the Source="OtherxamlPage.xaml" dynamically in event handler, e.g. Button.Click as per your example.
Alternatively, consider the creation of WPF UserControl (re: https://msdn.microsoft.com/en-us/library/cc294992.aspx) instead of that other XAML Window (or Page) and place it directly into the grid cell. In both cases set the content "Stretch" property in order to adjust its size automatically, thus you won't need to specify it in the code.
Hope this may help.
Ok, so I just tried out the WPF WPF Example from msdn, and I noticed it says you get a dropdown menu, but I only get a dropdown menu if I go to the xaml code itself.
And even then when selecting brown, it shows some darkish red color, what is up with that?
Question:
How to get the default brown color.
Code:
Sorry forgot the Xaml code..
<Window x:Class="WPF_Ink_Pane.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Ink Pane" Height="550" Width="370">
<Grid Background="Brown" Height="520" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="0*"/>
</Grid.ColumnDefinitions>
<InkCanvas x:Name="inkCanvas" Margin="9,9,10,68" Background="LightYellow"/>
<Button x:Name="btnClear" Content="Clear" HorizontalAlignment="Left" Margin="9,457,0,0" VerticalAlignment="Top" Width="149" Height="39" Click="btnClear_Click"/>
<Button x:Name="btnClose" Content="Close" HorizontalAlignment="Left" Margin="202,457,9,0" VerticalAlignment="Top" Width="150" Height="39" Click="btnClose_Click"/>
</Grid>
EDIT:
Is this what your properties window looks like?
MSDN must have meant SaddleBrown because yes, the standard Brown has a red tint to it.
I have a StackPanel containing a StackPanel and some other items. The first StackPanel has a vertical orientation, the the inner one has a horizontal orientation. The inner one has a TreeView and a ListView, I would like them to expand and fit the width of the window, which I set by the window and allow the user to change. I would also like the outer StackPanel to fit the height of the window. How do I do this?
Edit:
I've converted to using a DockPanel, and I've set the DockPanel.Dock properties correctly in each of the elements, and have disabled LastChildFill in both of the dockpanels, the layout still does not stretch.
The Code:
<Window x:Class="Clippy.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="600" MinHeight="400" MinWidth="600" Loaded="Window_Loaded" SizeChanged="Window_SizeChanged">
<DockPanel Name="wrapperDockPanel" LastChildFill="False">
<Menu Height="22" Name="mainMenu" Width="Auto" DockPanel.Dock="Top" />
<ToolBar Height="26" Name="mainToolBar" Width="Auto" DockPanel.Dock="Top" />
<DockPanel Height="Auto" Name="contentDockPanel" DockPanel.Dock="Top" LastChildFill="False">
<TreeView Name="categoryTreeView" />
<ListView Name="clipListView" />
</DockPanel>
<StatusBar Height="23" Name="mainStatusBar" DockPanel.Dock="Top" />
</DockPanel>
</Window>
Use a DockPanel instead. StackPanel explicitly doesn't care about visible space, whereas DockPanel does all of it's size calculation based on available space.
Update:
In addition, in my experience, putting the body of the window into a View, and only having the View in the Window makes for a better Auto Size experience.
For some reason putting all of the children directly into the Window seems to not auto size very well.
Update 2:
I would remove the explicit DockPanel.Dock attribute from the element that you want to stretch (fill) the unused space.
This should do it - I set it up so that the TreeView and the ListView shared the main view 50/50; if you don't want that, set it to 'Auto' and '*' or something. Use "LastChildFill" to your advantage!
<Window x:Class="Clippy.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="400" Width="600" MinHeight="400" MinWidth="600" Loaded="Window_Loaded" SizeChanged="Window_SizeChanged">
<DockPanel LastChildFill="True">
<Menu Width="Auto" DockPanel.Dock="Top" />
<ToolBar Width="Auto" DockPanel.Dock="Top" />
<StatusBar DockPanel.Dock="Bottom" />
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="0.5*" />
<RowDefinition Height="0.5*" />
</Grid.RowDefinitions>
<TreeView Name="categoryTreeView" Grid.Row="0" />
<ListView Name="clipListView" Grid.Row="1" />
</Grid>
</DockPanel>
</Window>
Set width and height properties to "auto"