The final column of the below grid view is not displaying in the center vertically, though the first image is and they use the same lookup method to find the image source (A resource dictionary object locator class I have). The final image (CurrencyImg) has the bottom of the image aligned with the middle of the row, so it stretches out of view upwards and doesn't fill the lower half of the row. Confused!
<Grid Name="grdCustomer" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="300" />
<ColumnDefinition Width="220" />
<ColumnDefinition Width="50" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="30" />
<ColumnDefinition Width="30" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="18"/>
</Grid.RowDefinitions>
<Image Source="{y:ImageStaticResource {Binding IconString}}" Margin="0,0,0,0" VerticalAlignment="Center" ></Image>
<TextBlock Grid.Column="1" Text="{Binding CustomerDesc}" VerticalAlignment="Center" />
<TextBlock Name="tbTxnCount" Grid.Column="2" Text="{Binding TxnCount}" VerticalAlignment="Center" />
<TextBlock Name="tbAmount" Style="{StaticResource myCustStyleColor}" Grid.Column="3" Text="{Binding Amount}" HorizontalAlignment="Right" VerticalAlignment="Center" />
<TextBlock Name="tbCurrency" Grid.Column="4" Text="{Binding Currency}" HorizontalAlignment="Right" VerticalAlignment="Center" />
<Image Name="imgCurrency" Grid.Column="5" Margin="0,0,0,0" Source="{y:ImageStaticResource {Binding CurrencyImg}}" VerticalAlignment="Center" />
</Grid>
Related
This is my sample code ,Please help me to achieve both goals simultaneouslyImage
On click toggle button collapse and visible column and vertical split button.
In the below fig. First add toggle button and First column contain two column .
It contains second sub column is collapse or disable based on toggle button click.
and Spltter is working on outside two main column please help me as soon as possible
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Window.Resources>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition Width="5"/>
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="300"/>
</Grid.ColumnDefinitions>
<Border Background="Green"
Grid.Column="0">
<Grid Grid.Column="1"
Visibility="{Binding IsChecked, ElementName=toggleButton, Converter={StaticResource BooleanToVisibilityConverter}}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40"/>
<ColumnDefinition Width="300" />
</Grid.ColumnDefinitions>
<WrapPanel Grid.Column="1"
Background="Aqua" />
</Grid>
</Border>
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
IsChecked="True"
HorizontalAlignment="Left"
VerticalAlignment="Top" />
</Grid>
<GridSplitter Width="5"
Grid.Column="1"
ResizeBehavior="CurrentAndNext" />
<Grid Grid.Column="2"></Grid>
</Grid>
From reading your question, I believe this is what you are trying to achieve. Please let me know if I didn't understand you properly.
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="40" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Border
Grid.Column="0"
Background="Green">
<ToggleButton x:Name="toggleButton"
Width="30"
Height="30"
Margin="0,10,10,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
IsChecked="True" />
</Border>
<Grid
Grid.Column="1"
MaxWidth="300"
Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}">
<WrapPanel Background="Aqua">
<TextBlock
Margin="8"
Text="Item 01" />
<TextBlock
Margin="8"
Text="Item 02" />
<TextBlock
Margin="8"
Text="Item 03" />
<TextBlock
Margin="8"
Text="Item 04" />
<TextBlock
Margin="8"
Text="Item 05" />
</WrapPanel>
</Grid>
<GridSplitter
Grid.Column="1"
Width="5"
Visibility="{Binding ElementName=toggleButton, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" />
<Grid Grid.Column="3">
<TextBlock
HorizontalAlignment="Center"
VerticalAlignment="Center"
Text="Column 2" />
</Grid>
</Grid>
How can separate TreeViewItem in few parts with Grid.Column or anything else to like in the picture: One part to be Label, second part to be Image, third part to be empty place and last part to be CheckBox (for example).
enter image description here
And my results is too different from this what I need to make, here is the picture with my results.
enter image description here
And part of my code:
<Border Name="SensorsOption" BorderThickness="0 2 2 2" BorderBrush="#dce3e2" Background="#dce3e2" Grid.Column="0" Grid.Row="3" Grid.RowSpan="2" Margin="0 2 0 0">
<ScrollViewer>
<Border Name="InsideSensorOption" BorderThickness="2 0 2 2" BorderBrush="#dce3e2" Background="#dce3e2" Grid.Column="0" Grid.Row="3" Grid.RowSpan="2">
<StackPanel Orientation="Vertical" ScrollViewer.HorizontalScrollBarVisibility="Visible" ScrollViewer.VerticalScrollBarVisibility="Visible">
<Label Content="Sensors"
Background="#ebf0f0"
Foreground="#1d2326"
FontWeight="Bold"
FontSize="12"
BorderBrush="#dae3e2"
BorderThickness="0 0 0 2"
Padding="25 6 6 6"/>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="21*" />
<ColumnDefinition Width="43*" />
<ColumnDefinition Width="17*" />
<ColumnDefinition Width="15*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="50*" />
</Grid.RowDefinitions>
<Image Grid.Column="0" Grid.Row="0" Source="https://cdn0.iconfinder.com/data/icons/good-weather-1/96/weather_icons-64-32.png" Height="24" Width="24" />
<Label Grid.Column="1" Grid.Row="0" Content="T1 S1" />
<CheckBox Grid.Column="3" Grid.Row="0" VerticalAlignment="Center" IsChecked="{Binding AirIsChecked}" />
<TreeView Grid.Row="1" Grid.ColumnSpan="4">
<TreeViewItem>
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="68*" />
<ColumnDefinition Width="13*" />
<ColumnDefinition Width="19*" />
</Grid.ColumnDefinitions>
<Label Content="Value" Grid.Column="0" />
<Image Grid.Column="1" Source="http://www.metalsaber.com/images/main_images/rss.gif" Width="30" Height="15" />
<CheckBox Grid.Column="2" IsChecked="{Binding AirValueIsChecked}" />
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
</Grid>
</StackPanel>
</Border>
</ScrollViewer>
</Border>
It is possible by using Margin property:
<TreeView >
<TreeViewItem>
<TreeViewItem.Header>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="68*" />
<ColumnDefinition Width="13*" />
<ColumnDefinition Width="19*" />
</Grid.ColumnDefinitions>
<Label Content="Value" Grid.Column="0" />
<TextBlock Text="Hello" Margin="100,0,0,0" Grid.Column="1"/>
<CheckBox Grid.Column="2" IsChecked="{Binding AirValueIsChecked}" />
</Grid>
</TreeViewItem.Header>
</TreeViewItem>
</TreeView>
As MSDN says:
The margin is the space between this element and other elements that
will be adjacent when layout creates the user interface (UI). Shared
elements might be peer elements (such as other elements in the
collection of a common parent control), or might also be this
element's parent.
I have a StackPanel, but the following line :
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />
is not Wrapping the Text.
<StackPanel Orientation="Vertical">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0">
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
</DockPanel>
<TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
<Image
Grid.Row="0"
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding Notes}" TextWrapping="Wrap" />
<Image
Grid.Row="1"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>
</StackPanel>
The StackPanel Orientation is set to 'Vertical' but the TextBlock is not inheriting it.
Where am I going wrong?
Your problem is using the StackPanel that allows its children to fill in all the available space - the StackPanel stretches accordingly to the size of its content. Try removing the StackPanel and keep just the Grid - this way you will limit the size of its children to the available space used by the Grid.
If that isn't enough in the layout you've built, try setting a MaxWidth on the TextBox that needs wrapping.
Now the source of your problem was also the fact that your TextBox was inserted in the first Column of the Grid that had an infinite size (Width="Auto"). Thus, setting the Grid.Column="7" to the TextBox did the trick you wanted (wrapping text). Here's the revised code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="5" />
<ColumnDefinition Width="15" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<DockPanel Grid.Row="0" Grid.Column="0">
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Id, StringFormat='#\{0\}'}" />
<TextBlock FontWeight="Bold" Padding="0,0,5,0" Text="{Binding Path=Name}" />
</DockPanel>
<TextBlock Grid.Row="0" Grid.Column="4" FontWeight="Bold" Text="{Binding Path=Time, StringFormat={}{0:HH:mm}}" />
<Image
Grid.Row="0"
Grid.Column="6"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Source="{Binding Path=Image, Mode=OneWay, Converter={StaticResource ImageConverter}}" />
<TextBlock Grid.Row="1" Grid.Column="0" Grid.ColumnSpan="7" Text="{Binding Notes}" TextWrapping="Wrap" />
<Image
Grid.Row="1"
Grid.Column="4"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Source="{Binding Path=Picture, Mode=OneWay, Converter={StaticResource PictureConverter}}" />
</Grid>
I'm just beginning on figuring out what works best for layout/data display in XAML (WPF), and don't have the intuition yet of what controls, etc work well in certain situations.
Nothing needs to be sorted or filtered, columns and rows are static
Would using a datagrid or some combination of stackpanels/listboxes be best?
I see the "tricky" parts as being adding the "skew adjusted" sub-heading and the separating lines between some of the columns, what would be some suggestions to add these?
I would actually use the standard Grid (not the DataGrid). It seems ankward at the beginning but after you learn how to use it, you're gonna use it everywhere! :)
Here is an example to display your data (its not complete but you see the point):
<Grid x:Name="grdData" Background="White">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
<ColumnDefinition Width="Auto" MinWidth="50" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock FontWeight="Bold" FontSize="14" Padding="10">Annualized Statistics</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="1">1Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="2">2Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="3">3Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="4">4Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="5">5Yr</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="6">1st Half</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="7">2nd Half</TextBlock>
<TextBlock Grid.Row="1" Grid.Column="8">Incept</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0">Return</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="1">(4.81)</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="2">(2.25)</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="3">1.01</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="4">4.30</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="5">(0.61)</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="6">(18.75)</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="7">5.06</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="8">(7.48)</TextBlock>
<Rectangle Grid.Column="5" Grid.Row="1" Grid.RowSpan="5" Fill="Black" Width="1" HorizontalAlignment="Right" />
<Rectangle Grid.Column="7" Grid.Row="1" Grid.RowSpan="5" Fill="Black" Width="1" HorizontalAlignment="Right" />
</Grid>
I have to display few strings under a bitmap . At a time maximum number of strings that can displayed are 5 and not always all the 5 strings will be displayed. Also the length of the strings vary. Whatever be the case, I want to display these strings in a visually appealing manner under the bitmap. Like, if just one string, I want to position it centrally under the bitmap. If 2 strings, I want to space the strings nicely and center it under the bitmap and so.
I know only at run time the strings to display, number of strings ( min 1 and max 5) to display and also length of string.
I wrote the below XAML code, but I am unable to position the strings nicely for all my conditions. Bitmap1 is a circle, bitmap2 is left arrow and bitmap3 is right arrow.
Can someone help me here?
<Grid x:Name="Graphics" Grid.Column="1" Background="Black">
<Grid.RowDefinitions>
<RowDefinition Height="0.319*"/>
<RowDefinition Height="0.56*"/>
<RowDefinition Height="0.321*"/>
</Grid.RowDefinitions>
<Image Height="72" Source="/DataBinding;component/Bitmap1.bmp" Stretch="Fill" Width="108" Grid.Row="1" />
<Grid Grid.Row="1">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.408*"/>
<ColumnDefinition Width="0.15*"/>
<ColumnDefinition Width="0.408*"/>
</Grid.ColumnDefinitions>
<Image x:Name="Next" Height="48" Width="48" Grid.Column="2" Source="/DataBinding;component/Bitmap3.bmp" HorizontalAlignment="Left" />
<Image x:Name="Prev" Width="48" Height="48" Grid.Column="0" Source="/DataBinding;component/Bitmap2.bmp" HorizontalAlignment="Right"/>
<Grid HorizontalAlignment="Center" ShowGridLines="True" Width="Auto" Grid.ColumnSpan="3" Margin="38,69,41,-40">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<TextBlock Visibility="Visible" Text="String1" Padding="10" Grid.Column="0" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String2" Padding="10" Grid.Column="1" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String3" Padding="10" Grid.Column="2" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String4" Padding="10" Grid.Column="3" FontSize="14.667" TextAlignment="Center" Foreground="White" />
<TextBlock Visibility="Visible" Text="String5" Padding="10" Grid.Column="4" FontSize="14.667" TextAlignment="Center" Foreground="White" />
</Grid>
</Grid>
</Grid>
What you want to do is create a custom panel by creating a custom control based on panel. Override ArrangeOverride and then place things exactly where you want them as if you have a canvas to work with, because your panel is like a canvas when you override ArrangeOverride. Grids are a custom panel themselves :-)
<StackPanel Name="stack1" Orientation="Horizontal" Width="Auto" Background="Red" >
<TextBlock FontSize="14.667" Width="Auto" TextAlignment="Center">
<Run x:Name="String1" Text="String1" />
<Run x:Name="String2" Text="String2" />
<Run x:Name="String3" Text="String3" />
<Run x:Name="String4" Text="String4" />
<Run x:Name="String5" Text="String5" />
</TextBlock>
</StackPanel>
</Grid>
</Grid>