I have to put 2 buttons in this same row and column on grid
i don't want use margin or vertical position, but i want to their positions is:
on upper than second.
how to simply do that?
i did this by:
<button1 verticalAligment="top" />
<button2 verticalAligment="bottom" />
but how to do that better way?
Try This.
<telerik:RadGridView Name="AppsGridView" AutoGenerateColumns="False" IsReadOnly="True">
<telerik:RadGridView.Columns>
<telerik:GridViewColumn>
<telerik:GridViewColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="100"/>
<ColumnDefinition Width="10"/>
</Grid.ColumnDefinitions>
<telerik:RadButton Grid.Row="0" Grid.Column="1" Width="40" Cursor="Hand" Content="Edit" FontSize="14" Background="#FFF2F2F2" CornerRadius="3" verticalAligment="top"/>
<telerik:RadButton Grid.Row="0" Grid.Column="1" Width="50" Cursor="Hand" Content="Delete" FontSize="14" Background="#FFF2F2F2" CornerRadius="3" verticalAligment="bottom"/>
</Grid>
</DataTemplate>
</telerik:GridViewColumn.CellTemplate>
</telerik:GridViewColumn>
</telerik:RadGridView.Columns>
</telerik:RadGridView>
Use Wrappanel as follows
<Wrappanel Orientation="Horizontal"><button1 HorizontalAlignment="Left"/><button2 HorizontalAlignment="Right" /></Wrappanel>
Related
In my List view I use a grid to arrange the controls of list view item
here is the code
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<!--<Label Width="Auto" HorizontalAlignment="Stretch" Height="3" Background="LightGray"></Label>-->
<Grid HorizontalAlignment="Stretch" MinWidth="220" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="65*"/>
<ColumnDefinition Width="10" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" HorizontalAlignment="Left" FontWeight="Bold" Text="{Binding Path=Name}"/>
<TextBlock Grid.Row="0" Grid.Column="2" HorizontalAlignment="Right" Text="{Binding PlanDate.DateValue,StringFormat=d}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" HorizontalAlignment="Left" Text="{Binding Owner}"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2" HorizontalAlignment="Right" Text="{Binding ForecastDate.DateValue,StringFormat=d}"></TextBlock>
</Grid>
<!--<Label Width="Auto" HorizontalAlignment="Stretch" Height="3" Background="LightGray"></Label>-->
</Border>
</DataTemplate>
</ListView.ItemTemplate>
Here the text blocks in grid coloumn 2 horizontal alignment is set to right .. still the texblocks are not been placed at the right . Am i doing some mistake here? Please advise
Try adding HorizontalContentAlignment="Stretch" to your ListView (the default value is Left and that's why you see it's not stretched).
You can remove HorizontalAlignment="Stretch" MinWidth="220" in your inner Grid.
Gridsplitter trouble:
I have a: grid with 4 columns
Column 0 contains a grid with 3 columns
Column 1 contains a gridsplitter
Column 2 contains a stackpanel of width 20 pixels
Column 3 contains a grid with 3 columns
When the gridsplitter is moved to either the left or right, BOTH panels shrink the same amount -- one should shrink and the other should grow.
I am hesitant to include the xaml, but you are going to ask for it, so here is an abridged version. I have only removed a few unrelated controls, and gutted the treeviews and listviews. If you really need the whole thing, then of course I can supply it.
Thanks for any help!
<Window x:Class="Calvin.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"
Title="Calvin" >
<DockPanel Height="Auto" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" LastChildFill="True" >
<Grid DockPanel.Dock="Top" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" RenderTransformOrigin="0.5,0.497" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid Grid.Column="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="2*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" TextWrapping="NoWrap" Text="Field One" HorizontalAlignment="Stretch"/>
<TextBox Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="3" TextWrapping="NoWrap" Text="Field Two" HorizontalAlignment="Stretch" />
<TreeView DockPanel.Dock="Left" Grid.Column="0" Grid.Row="1" Name="PaneOneTree"
Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
</TreeView>
<GridSplitter Grid.Column="1" Grid.Row="1" Width="5" HorizontalAlignment="Center"/>
<ScrollViewer Grid.Column="2" Grid.Row="1" >
<ListView DockPanel.Dock="Left" Name="FileDetailsLeft" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" >
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="120" />
<GridViewColumn Header="Size" Width="120" />
<GridViewColumn Header="Access Time" Width="120" />
<GridViewColumn Header="Extension" Width="120" />
</GridView>
</ListView.View>
</ListView>
</ScrollViewer>
</Grid>
<GridSplitter Grid.Column="1" Grid.Row="0" Width="5" HorizontalAlignment="Left" />
<StackPanel Grid.Column="2" Grid.Row="1" VerticalAlignment="Stretch" HorizontalAlignment="Center" Width="Auto" Background="Red">
<Button >Move</Button>
<Button >Other</Button>
</StackPanel>
<Grid Grid.Column="3" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<TextBox Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3" TextWrapping="NoWrap" Background="Cornsilk"
Text="Pane Two Text" HorizontalAlignment="Stretch"/>
<TextBox Grid.Row="0" Grid.Column="4" Grid.ColumnSpan="3" TextWrapping="NoWrap"
Text="Pane Two Text" HorizontalAlignment="Stretch" Background="Linen" />
<TreeView DockPanel.Dock="Left" Grid.Column="0" Grid.Row="1" Name="PaneTwoTree" Width="Auto" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="SeaShell" >
</TreeView>
<GridSplitter Grid.Column="1" Grid.Row="1" Width="5" HorizontalAlignment="Center" />
<ScrollViewer Grid.Column="2" Grid.Row="1" >
<ListView DockPanel.Dock="Left" Name="FileDetailsRight"
HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Width="Auto" Background="Moccasin" >
<ListView.View>
<GridView>
<GridViewColumn Header="Name" Width="120" />
<GridViewColumn Header="Size" Width="120" />
<GridViewColumn Header="Access Time" Width="120" />
<GridViewColumn Header="Extension" Width="120" />
</GridView>
</ListView.View>
<ListViewItem >List Item</ListViewItem>
<ListViewItem >List Item</ListViewItem>
<ListViewItem >List Item</ListViewItem>
<ListViewItem >List Item</ListViewItem>
<ListViewItem >List Item</ListViewItem>
<ListViewItem >List Item</ListViewItem>
<ListViewItem >List Item</ListViewItem>
</ListView>
</ScrollViewer>
</Grid>
</Grid>
</DockPanel>
</Window>
And, of course, feel free to suggest better ways to do anything:) -- I'm still learning.
:bp:
I had the same issue. When I moved one GridSplitter it would also move the other (Usually in the opposite direction.). I eventually discovered that I had forgotten to set a property of the GridSplitter. For a GridSplitter you MUST have both vertical and horizontal properties set ie...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<GridSplitter Grid.Column="1" Width="2"
VerticalAlignment="Stretch" HorizontalAlignment="Center"/>
</Grid>
Ok, I see your problem now... basically, you can't set an exact Width on a column who's Width will be changed by a GridSplitter control. Instead, you can only set MinWidth and/or MaxWidth property on the ColumnDefinition, but be aware that you can then not use the "*" notation. Also, looking at the code example below, you can see that you could have stripped out a whole load more code for your question example... this was all that was required to demonstrate your problem (before I fixed it):
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="150" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="20" />
<ColumnDefinition Width="*" MinWidth="150" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Rectangle Grid.Column="0" Fill="PowderBlue" />
<GridSplitter Grid.Column="1" Background="Black" HorizontalAlignment="Stretch" />
<Rectangle Grid.Column="2" Fill="Red" Height="100" />
<Rectangle Grid.Column="3" Fill="Purple" />
</Grid>
I have a wpf Grid, i want to merge the two Column Header.I have tried using the below code the problem here is the column spawn to 2 but in the cell is one that why the for each column grid line is not visible.Can any body answer the better solution to achieve this
<toolkit:DataGridTemplateColumn>
<toolkit:DataGridTemplateColumn.Header>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Center" Text="Missing from FISAP Summary Part II Section F"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="A" Width="60" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="C" Width="60" HorizontalAlignment="Center"/>
<TextBlock Grid.Column="2" Grid.Row="1" Text="D" Width="60" HorizontalAlignment="Center"/>
</Grid>
</toolkit:DataGridTemplateColumn.Header>
<toolkit:DataGridTemplateColumn.CellTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Path=A}" Width="60" HorizontalAlignment="Right" />
<TextBlock Grid.Column="1" Text="{Binding Path=C}" Width="60" HorizontalAlignment="Right" />
<TextBlock Grid.Column="2" Text="{Binding Path=D}" Width="60" HorizontalAlignment="Right" />
</Grid>
</DataTemplate>
</toolkit:DataGridTemplateColumn.CellTemplate>
</toolkit:DataGridTemplateColumn>
I have a grid in WPF which is made of 4 rows along 2 columns where column 1 holds an Image control and column 2 holds 4 Textblocks. Problem is, the Image control sizes itself to the Image size and extends the listbox's entry too much [Its in a DataTemplate] and makes everything look distorted. I dont want to manually set a max height/width because i want the Image to size itself to the size of the 4 textblocks that are alongside it. Any ideas?
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="{Binding Logo, Converter={StaticResource BSConverter}}" Grid.Row="0" Grid.RowSpan="4"
Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True"/>
<TextBlock Text="{Binding Name}" Grid.Row="0" Grid.Column="1"/>
<TextBlock Text="{Binding Author}" Grid.Row="1" Grid.Column="1"/>
<TextBlock Text="{Binding Version}" Grid.Row="2" Grid.Column="1"/>
<TextBlock Text="{Binding Description}" Grid.Row="3" Grid.Column="1"/>
</Grid>
</DataTemplate>
Thanks in advance
You can use Grid.IsSharedSizeGroup on the Parent ListBox to make sure all of your items get the same Width for the first Column like this
<ListBox ...
Grid.IsSharedSizeScope="True">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition SharedSizeGroup="GroupA"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
...
For the Image height problem, you could bind Height to the ActualHeight of the Parent Grid with a FallbackValue of 1.0 (to ensure the Height of the Image doesn't effect the Height of the Grid)
<Image Source="{Binding Logo, Converter={StaticResource BSConverter}}"
Grid.Row="0"
Grid.RowSpan="4"
Grid.Column="0"
Stretch="Uniform" SnapsToDevicePixels="True"
Height="{Binding RelativeSource={RelativeSource AncestorType=Grid},
Path=ActualHeight,
FallbackValue=1.0}"/>
Modifying your containers slightly to make use of a StackPanel in conjunction with a Grid and referencing the StackPanel via ElementName binding should provide you the visuals you are looking for...
<DataTemplate>
<Grid HorizontalAlignment="Left" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image VerticalAlignment="Top" HorizontalAlignment="Right" Margin="0,0,8,0" Source="{Binding Logo, Converter={StaticResource BSConverter}}"
Grid.Column="0" Stretch="Uniform" SnapsToDevicePixels="True"
Height="{Binding ElementName=Contents, Path=ActualHeight}"/>
<StackPanel VerticalAlignment="Top" Name="Contents" Grid.Column="1" Orientation="Vertical">
<TextBlock Text="{Binding Name}"/>
<TextBlock Text="{Binding Author}"/>
<TextBlock Text="{Binding Version}"/>
<TextBlock Text="{Binding Description}"/>
</StackPanel>
</Grid>
</DataTemplate>
Probably I'm just missing something obvious, but I can't get the image in my DataTemplate to align to the right in the Grid, so that when the window is stretched, the image is "pulled" to the right as well:
<Window.Resources>
<DataTemplate x:Key="PersonTemplate" DataType="Minimal.Client.Person">
<Border BorderBrush="Purple" BorderThickness="2" CornerRadius="2" Padding="5" Margin="5">
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="200"/>
<ColumnDefinition Width="Auto" MaxWidth="200"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column ="0" Orientation="Horizontal" >
<TextBlock FontFamily="Verdana" FontSize="16" FontWeight="Bold" Text="{Binding LastName}" />
<TextBlock FontFamily="Verdana" FontSize="16" Text=", " />
<TextBlock FontFamily="Verdana" FontSize="16" Text="{Binding FirstName}" />
</StackPanel>
<StackPanel Grid.Column="1" Orientation="Vertical" HorizontalAlignment="Right">
<Border BorderBrush="Black" BorderThickness="1">
<Image Source="{Binding Picture}" Width="180" Height="150" />
</Border>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</Window.Resources>
Any suggestions?
I think the problem is that you have set a MaxWidth of 200 for the second column (where the Image is contained). Therefore, the column will not be any wider than 200 pixels and the two columns will not use the complete available space. If you insert another column in between the two columns and make this one star-sized, the Image will be right-aligned:
<Grid Margin="10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="200"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto" MaxWidth="200"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column ="0" Orientation="Horizontal" >
<TextBlock FontFamily="Verdana" FontSize="16" FontWeight="Bold" Text="{Binding LastName}" />
<TextBlock FontFamily="Verdana" FontSize="16" Text=", " />
<TextBlock FontFamily="Verdana" FontSize="16" Text="{Binding FirstName}" />
</StackPanel>
<StackPanel Grid.Column="2" Orientation="Vertical" HorizontalAlignment="Right">
<Border BorderBrush="Black" BorderThickness="1">
<Image Source="{Binding Picture}" Width="180" Height="150" />
</Border>
</StackPanel>
</Grid>
This way, it works for me. However, you should be careful when using StackPanels. They always take as much space as they need. And if they are not given that much space, part of the content will simply be hidden.
gehho.
Try taking out the "MaxWidth" from your second column definition, and setting the Width to "*".
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="200"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
This keeeps the explicit settings from positioning your second column to the left.