I got 4 buttons aligned inside a grid. Is there any way to make alignment automatic so that if one button's visibility is set to false the remaining buttons uses the space wisely[other buttons moves to accommodate into new space]?
Instead of a grid, put the buttons in a StackPanel with Orientation="Horizontal". Also, make sure you set your button Visibility to "Collapsed" instead of "Hidden".
Try the following:
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<StackPanel Orientation="Horizontal">
<Button Content="1" Width="50" Height="23" Visibility="Collapsed"/>
<Button Content="2" Width="50" Height="23"/>
<Button Content="3" Width="50" Height="23" Visibility="Collapsed"/>
<Button Content="4" Width="50" Height="23"/>
</StackPanel>
</Grid>
Or this:
<Grid VerticalAlignment="Center" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button Grid.Column="1" Content="1" Width="50" Height="23" Visibility="Collapsed"/>
<Button Grid.Column="2" Content="2" Width="50" Height="23"/>
<Button Grid.Column="3" Content="3" Width="50" Height="23" Visibility="Collapsed"/>
<Button Grid.Column="4" Content="4" Width="50" Height="23"/>
</Grid>
You should see the buttons centered but only show the second and fourth button
Depends on the layout and how complex you want the space distribution to be, if a uniform distribution is enough you could use a UniformGrid, in a normal Grid that would be a bit tricky as the columns and rows need to be adjusted.
Related
I have a button with a StackPanel, I want to align StackPanel to center according to first TextBox (maintext).
<Button Style="{StaticResource NumPadStyle}" Grid.Column="0" Grid.Row="2" Tag="7" >
<StackPanel Orientation="Horizontal">
<TextBlock Style="{StaticResource NumPadMainText}" Name="maintext">7</TextBlock>
<TextBlock Style="{StaticResource NumPadSubText}" Name="subtext">PQRS</TextBlock>
</StackPanel>
</Button>
current:
desired:
Taking into consideration that it seems that all the buttons have the same size, you could use a grid with Columns of even size, to be sure that your texts will be positions in the same way in all the buttons.
<Button Style="{StaticResource NumPadStyle}" Grid.Column="0" Grid.Row="2" Tag="7">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="1"
Style="{StaticResource NumPadMainText}" Name="maintext">7</TextBlock>
<TextBlock Grid.Column="2" HorizontalAlignment="Left"
Style="{StaticResource NumPadSubText}"
Name="subtext">PQRS</TextBlock>
</Grid>
</Button>
LE: You can replace the Width="Auto" value in the Column to a fixed value, like Width="20" or something, in case you want all NumPadSubTexts to start from the same location in all buttons.
Set MinWidth (adjust it coherently with the fontsize) to StackPanel:
<StackPanel Orientation="Horizontal" MinWidth="35">
<TextBlock Style="{StaticResource NumPadMainText}" Name="maintext">7</TextBlock>
<TextBlock Style="{StaticResource NumPadSubText}" Name="subtext">PQRS</TextBlock>
</StackPanel>
I have this WPF button in my StackPanel:
<StackPanel Grid.ColumnSpan="6" Grid.Row="12" Orientation="Horizontal" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="LightGray" Height="40">
<Button x:Name="btnSave" Click="btnSave_Click" Content="{x:Static res:Strings.ToolPanelEditView_Button_Save}" HorizontalAlignment="Right" />
</StackPanel>
For some reason, the button shows on the left although I set its HorizontalAlignment to Right:
How can I make my save button show on the right?
P.S. when I change the StackPanel's HorizontalAlignment to Right instead of Stretch, the button does show on the right like it should (but then the gray background of the StackPanel does not stretch either...
I think that a Grid is more appropriate for your case
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="LightGray" Height="40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Button x:Name="btnSave" Grid.Column="1" Content="Save" HorizontalAlignment="Right" />
<!--Your Other Button Grid.Column="2"-->
</Grid>
or you could as well replace the stackPanel with a DockPanel
You can use DockPanel as container, stretch it and dock your button to the right side
<DockPanel Grid.ColumnSpan="6" Grid.Row="12" HorizontalAlignment="Stretch" VerticalAlignment="Center" Background="LightGray" Height="40">
<Button Content="Save" DockPanel.Dock="Right"/>
<Button Content="Cancel" DockPanel.Dock="Right"/>
</DockPanel>
I Have a little WPF window that contains 3 buttons with image and TextBlock like this :
<Button x:Name="cmdPrint" Margin="5" VerticalAlignment="Center" Grid.Column="2"
ToolTip="Print a simulation"
MouseMove="MouseMouveHandler"
Click="ButtonClickHandler" Height="36">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Image Source="images\print.png" Grid.Column="0" VerticalAlignment="Center"
Margin="2"/>
<TextBlock Text="_Print" Grid.Column="1" Foreground="DarkBlue"
VerticalAlignment="Center" Margin="2"/>
</Grid>
</Button>
As you can see , the button is customized, so, the following code doesn’t work :
<Button Name="cmdPrint " Content="_Print"></Button>
Is it possible to Fire Print button when i Press ‘P’ key ?
Thank you in advance.
Use label instead of text block will work for you
Click="ButtonClickHandler" Height="36" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="30"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" VerticalAlignment="Center"
Margin="2"/>
<Label Content="_Print" Grid.Column="1" Foreground="DarkBlue"
VerticalAlignment="Center" Margin="2" />
</Grid>
</Button>
I'm creating a Dialog in WPF with pretty standard Save and Cancel buttons. I want the Save and Cancel buttons to have the same width. I thought this would be a trivial matter. I placed the buttons in a Grid, with two columns sized to '*', yet the columns have different widths!!
<Grid Grid.Row="2" HorizontalAlignment="Right">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button Content="Save" Margin="8" />
<Button Content="Cancel" Margin="8" Grid.Column="1" />
</Grid>
If I take off the Horizontal alignment, the columns size equally, but the Grid is too large. How do I get a Grid, aligned right, with two equal columns??
try
<UniformGrid HorizontalAlignment="Right" Columns="2">
<Button Content="Save" Margin="8" />
<Button Content="Cancel" Margin="8" Grid.Column="1" />
</UniformGrid>
i have added two buttons in stackpanel and set alignment as shown in the code
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<Button Content="Button" Height="64" Name="button1" Width="160" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Content="Button" Height="64" Name="button2" Width="160" HorizontalAlignment="Right" VerticalAlignment="Top"/>
</StackPanel>
but this doesn't match with my requirement. I want it to be like shown in image below.
So how can i do this?
Something like this:
<Grid
Width="480">
<Grid.ColumnDefinitions>
<ColumnDefinition
Width="*" />
<ColumnDefinition
Width="*" />
</Grid.ColumnDefinitions>
<Button
Width="200"
Content="Clear" />
<Button
Grid.Column="1"
Width="200"
Content="Options"
HorizontalAlignment="Right"
/>
</Grid>
UPDATE: Due to popular demand, here is a grid without the fixed width or the columns.
<Grid>
<Button
Width="150"
Content="Clear"
HorizontalAlignment="Left"
/>
<Button
Width="150"
Content="Options"
HorizontalAlignment="Right"
/>
</Grid>