WPF - can't see a button in th View design - wpf

I wrote a simple WPF window that shows a customers grid.
in the bottom of the grid I added a button "Add a new Customer, but it blended into the background of the window, and I can't see it in View design.
this is the code:
<Window x:Class="NihulMlay._1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title=" Customers " Height="120" Width="600">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Button FontWeight="Bold">Customer name</Button>
<Button Grid.Column="1" FontWeight="Bold">Name</Button>
<Label Grid.Row="1"></Label>
<Label Grid.Column="1" Grid.Row="1"></Label>
<Button Grid.ColumnSpan="2" Content="Add a new Customer" HorizontalAlignment="Left" Height="100" Margin="270,114,0,-173" Grid.Row="1" VerticalAlignment="Top" Width="75"/>
</Grid>
</Window>
thanks.

Your Problem is the Window height of 120, once you resize it to say 350, you can see the Button.
The margin on your Button is:
Margin="270,114,0,-173"
which makes a Top-Margin of 114, the Button height is 100 and the row above is set to 40. This values alone would make a total required height of 254 to see all contents.

I think you are mistaking a Grid with a DataGrid. Grid is an area that contains other controls while DataGrid Represents a control that displays data in a tabular form. Looking at your code sample, I think DataGrid is what you wanted.
Assuming you did really mean Grid, then you can move your Button out by placing the entire Grid in another container (e.g. a DockPanel) like this:
<DockPanel>
<Button DockPanel.Dock="Bottom" Content="Add a new Customer" Height="100" Width="139"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="40" />
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Button FontWeight="Bold">Customer name</Button>
<Button Grid.Column="1" FontWeight="Bold">Name</Button>
<Label Grid.Row="1"></Label>
<Label Grid.Column="1" Grid.Row="1"></Label>
</Grid>
</DockPanel>

Related

window resize when textbox resize

Here is the code for Textbox available in my window(form1.xaml),My requirement is when i am resizing my window i want to resize the textbox width also, How can i able to achieve this....
<TextBox Width="500" HorizontalAlignment="Left" Margin="5,0,0,5" TextWrapping="Wrap" AcceptsReturn="True" Text="{Binding Result,UpdateSourceTrigger=PropertyChanged,ValidatesOnDataErrors=True}" IsEnabled="{Binding OpenMode,Converter={StaticResource EnableModeConverter}}" Height="70" />
In WPF you typically place TextBox control within layout Grid control and set the ColumnDefinition Width property of that Grid cell to some relative value "*", so it will resize with the Window. Do NOT use a fixed Width="500" as per your sample: also, remove that "HorizontalAlignment="Left" (the default value is HorizontalAlignment="Stretch", so you can just omit it to simplify your XAML). See the following sample code snippet:
<Grid Name="Grid1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="4*"/>
</Grid.RowDefinitions>
<TextBox Name="TextBox1" Grid.Row="0" Grid.Column="0" Height="70" Margin="5,0,0,5" TextWrapping="Wrap" AcceptsReturn="True" (...Rest of Your code) />
</Grid>
Note: The same technique could be applied to a vertical "Height" property in case you need to make it also resizable.
Hope this will help. Best regards,
Set HorizontalAlignment to Stretch, and don't set the Width
<Grid>
<TextBox HorizontalAlignment="Stretch"
Margin="5,0,0,5"
TextWrapping="Wrap"
AcceptsReturn="True"
Height="70" />
</Grid>
Layout in WPF is heavily depend on the parent container. For example, create a form with labels and input fields, consider using a Grid panel. Controls in WPF by default resize according to the layout behavior of their parent. Here is an example of a window with two labeled text boxes and two buttons that resize along with the window.
<Window>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Contact Name" Grid.Row="0" Grid.Column="0" />
<TextBox Grid.Row="0" Grid.Column="1" />
<Label Content="Contact Location" Grid.Row="1" Grid.Column="0" />
<TextBox Grid.Row="1" Grid.Column="1" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right"
VerticalAlignment="Bottom" Grid.Row="2" Grid.Column="1">
<Button Content="OK" Width="75" Height="24" Margin="3" />
<Button Content="Cancel" Width="75" Height="24" Margin="3" />
</StackPanel>
</Grid>
</Window>

How to set a width of a grid column so it gets only as big as it needs to be. Auto does not work in my case

I have a user control which contains combobox only, it looks like this
<UserControl x:Class="LayoutProblem.ComboboxUserControl" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<ComboBox Width="300" Height="30" VerticalAlignment="Top" HorizontalAlignment="Left"/>
</UserControl>
Then inside of another user control I add a label to it, so it looks like this
<Grid >
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Label Content="Short Label" HorizontalAlignment="Right" />
<layoutProblem:ComboboxUserControl Grid.Column="1" />
<Label Content="Extra long Label" HorizontalAlignment="Right" Grid.Row="1"/>
<layoutProblem:ComboboxUserControl Grid.Column="1" Grid.Row="1"/>
</Grid>
Then next user control looks like this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label HorizontalAlignment="Right" Content="Some other label" />
<TextBox Grid.Column="1"
Width="50"
Height="30"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Grid>
Finally in MainWindow I put above together and it looks like this
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<layoutProblem:InputUserControl/>
<layoutProblem:ComboboxWithLabel Grid.Row="1" Grid.ColumnSpan="2" DataContext="{Binding DataContext2}" />
</Grid>
So all of this puts the controls together, but I’m having trouble of how to change the layout. Because now the labels should be in column 1 and textbox and comboboxes should be put to column 2. Itoes not matter what I set to the column definitions to, Auto, * or nothing the columns don’t get the size I want. If I take the column definitions out it suddenly works, but I need them because there are other things which are going to be put in the second column.
I looked online but I haven’t found a way to do it.
Thank you for your help.
Solved using IsSharedSizeScope = True and SharedSizeGroup = "".

Docking Top/Bottom/Left/Right/Filling in WPF

i am win form developer. whenever i want to set any control at top/Bottom/Left/Right position in its container then we just play the controls dock property in winform. so just guide me how can i place a control in its container top/Bottom/Left/Right position in such a way as a result when contain size change then control position will not change in wpf.
after searching google i came to know how filling works with Dock property and it is like
<Window ...Other window props... >
<Canvas HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<!-- Canvas items here... -->
</Canvas>
</Window>
So guide me how to set any control at top/Bottom/Left/Right position in its container with code snippet.
UPDATE
i just come to know dock panel can be use for my requirement like this way
<DockPanel LastChildFill="True">
<Button Content="Dock=Top" DockPanel.Dock="Top"/>
<Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/>
<Button Content="Dock=Left"/>
<Button Content="Dock=Right" DockPanel.Dock="Right"/>
<Button Content="LastChildFill=True"/>
</DockPanel>
any other way can i achieve this without using DockPanel. thanks
You can use a Grid, (note the star sizing)
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<!-- If not specified, then Grid.Column="0" Grid.Row="0" are defaults-->
<Button Content="Dock=Top" Grid.ColumnSpan="3"/>
<Button Content="Dock=Bottom" Grid.Row="2" Grid.ColumnSpan="3"/>
<Button Content="Dock=Left" Grid.Row="1"/>
<Button Content="Dock=Right" Grid.Column="2" Grid.Row="1" />
<Button Content="LastChildFill=True" Grid.Column="1" Grid.Row="1"/>
</Grid>
You can use margins and alignments (margins are approximate here)
<Grid>
<Button Content="Dock=Top" VerticalAlignment="Top"/>
<Button Content="Dock=Bottom" VerticalAlignment="Bottom"/>
<Button Content="Dock=Left" HorizontalAlignment="Left" Margin="0,35"/>
<Button Content="Dock=Right" HorizontalAlignment="Right" Margin="0,35" />
<Button Content="LastChildFill=True" Margin="75,35"/>
</Grid>
You can use StackPanels (this one needs more work to make it fill the space)
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center">
<Button Content="Dock=Top" />
<StackPanel Orientation="Horizontal" >
<Button Content="Dock=Left" />
<Button Content="LastChildFill=True" />
<Button Content="Dock=Right" />
</StackPanel>
<Button Content="Dock=Bottom" />
</StackPanel>
<DockPanel>
<Button DockPanel.Dock="Left" Content="Left"></Button>
<Button DockPanel.Dock="Right" Content="Right"></Button>
<Button DockPanel.Dock="Top" Content="Top"></Button>
<Button DockPanel.Dock="Bottom" Content="Bottom"></Button>
<Button DockPanel.Dock="Left" Content="Center" HorizontalAlignment="Center"></Button>
</DockPanel>

Making a visible/invisible panel that resizes the main window

I wish to achieve an effect like common media players with an eq or tracklist panel that can be shown or less with a click.
The main window should so automatically resize with the displayed content.
I wonder if I must care to do manually specifing the size or there's a solution more clear.
<Window x:Class="WpfApplicationAnimation.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="Auto" Width="Auto" SizeToContent="WidthAndHeight">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Label Margin="5" Grid.Column="0" Grid.Row="0">Value 1:</Label>
<Label Margin="5" Grid.Column="0" Grid.Row="1">Value 2:</Label>
<Label Margin="5" Grid.Column="0" Grid.Row="2">Value 3:</Label>
<Button Margin="5" Click="Button_Click_1" Grid.Column="0" Grid.Row="3" Visibility="Hidden">Hello</Button>
<TextBox Name="txt1" Margin="5" Grid.Column="1" Grid.Row="0" MinWidth="100" />
<TextBox Margin="5" Grid.Column="1" Grid.Row="1" MinWidth="100" />
<TextBox Margin="5" Grid.Column="1" Grid.Row="2" MinWidth="100" />
</Grid>
I tried with setting SizeToContent="WidthAndHeight" but even if visible the content of the button take the required space.
You can try to use an Expander although will not be the same effect. The problem will be Window Transparency (so you can get a rid out of that, as Winamp does; but then you get into a Memory Leak). But, expander is the only control I know that enables to to that automatically. Sure, you can always arrange and resize manually, but that's what you're trying to avoid.

Use all browser space in Silverlight application

I am currently writing a Silverlight application that will view documents. The main panel is a WrapPanel with controls on the left and bottom of the page. Currently, the WrapPanel width is getting set to whatever it needs to be able to display all document pages on one line and I would like to change it so that it will fill up the rest of the browser window, with no horizontal scroll bar
Here is my current xaml, where <doc:DocumentViewer x:Name="Viewer".. is the wrap panel in question.
<UserControl x:Class="SilverlightXPSViewer.MainPage"
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:doc="http://schemas.firstfloorsoftware.com/documenttoolkit"
mc:Ignorable="d">
<Grid x:Name="LayoutRoot" Background="White" >
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="40" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<doc:ThumbnailListBox x:Name="Thumbnails" Grid.Row="0" Grid.Column="0" DocumentDataSource="{Binding ElementName=DataSource}" PageIndex="{Binding PageIndex, Mode=TwoWay, ElementName=PageNavigator}"/>
<doc:DocumentViewer x:Name="Viewer" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="3" DocumentDataSource="{Binding ElementName=DataSource}" Width="{Binding ElementName=MainWidth}"/>
<doc:DocumentDataSource x:Name="DataSource" Grid.Row="0" LoadError="DataSource_LoadError" />
<StackPanel Grid.Column="3" Grid.Row="1" Orientation="Horizontal">
<doc:PageNavigator x:Name="PageNavigator" Margin="0"
PageCount="{Binding PageCount, ElementName=Viewer}"
PageIndex="{Binding PageIndex, ElementName=Viewer, Mode=TwoWay}"/>
<doc:PageNavigator />
</StackPanel>
<doc:ViewModePicker Grid.Row="1" Grid.Column="0" x:Name="Collection"/>
<Button Width="200" Name="btnZoomIn" Grid.Row="1" Grid.Column="1" Cursor="Hand" Click="btnZoomIn_Click">Zoom In</Button>
<Button Width="200" Name="btnZoomOut" Grid.Row="1" Grid.Column="2" Cursor="Hand" Click="btnZoomOut_Click">Zoom Out</Button>
</Grid>
</UserControl>
Use the System.Windows.Browser.HtmlPage object to get the available screen size from the HTML DOM (thus letting the browser to tell you how much space there is) and set the control size from that.
here's an example:
http://www.jeff.wilcox.name/2008/06/browserscreeninformation/

Resources