I populate a textblock with data from Service and I bind the data to Listbox and then display it in textblocks, so far so good. My problem is that I want each textblock content to be placed in certain space in certain column, but this doesn't seem to work as my text is just put in each line and is not alligned as it should be.
here is my code:
<Grid x:Name="BranchesGrid" Margin="12,0,-12,6" Grid.Row="2" Height="542" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<ListBox Height="530" HorizontalAlignment="Left" Margin="12,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="456" Grid.ColumnSpan="4">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding ID}" FontSize="20" Grid.Column="0" Padding="55,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Name}" FontSize="20" Grid.Column="1" Padding="110,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding City}" FontSize="20" Grid.Column="2" Padding="70,10,5,10" HorizontalAlignment="Center"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Where seems to be the problem?
Try this:
<Grid x:Name="BranchesGrid" Margin="12,0,-12,6" Grid.Row="2" Height="542" VerticalAlignment="Bottom">
<ListBox Height="530" HorizontalAlignment="Left" Margin="12,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="456" Grid.ColumnSpan="4">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150" />
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding ID}" FontSize="20" Grid.Column="0" Padding="55,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding Name}" FontSize="20" Grid.Column="1" Padding="110,10,5,10" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding City}" FontSize="20" Grid.Column="2" Padding="70,10,5,10" HorizontalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
Related
I have ListBox and dynamic DataTempletes Items.
When TextBlock text wrapping, ListBox size is adding and size changing when unwrapping doesn't return to old value and remains un-changed.
I don't understand what is the problem. TextBlock size changed but not ListBox.
<ListBox x:Name="ctrlFavOdds"
Grid.Row="2"
ItemsSource="{Binding 'FavStakesList'}"
ItemContainerStyle="{StaticResource alternatingStyle}"
AlternationCount="2"
FontWeight="Bold"
HorizontalContentAlignment="Stretch"
IsHitTestVisible="False"
VerticalAlignment="Top"
VirtualizingStackPanel.IsVirtualizing="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollBarVisibility="Disabled">
<ListBox.ItemTemplate>
<DataTemplate >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0"
Margin="2,0,5,0"
Source="{Binding 'MakeExpressBetImage', Converter={StaticResource 'imageconverter'}}"/>
<TextBlock Grid.Column="1"
TextWrapping="Wrap"
FontSize="12"
Text="{Binding Stake}"
VerticalAlignment="Center"
HorizontalAlignment="Left"/>
<TextBlock Grid.Column="2"
TextWrapping="Wrap"
Margin="5,0,0,0"
Text="{Binding StakeFactor}"
HorizontalAlignment="Right"
VerticalAlignment="Center"
FontSize="14"/>
<Image Grid.Column="3"
Margin="5,0,2,0"
Source="{Binding 'UpDounImage', Converter={StaticResource imageconverter}}"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
When TextBlock text wraping, ListBox size is adding and size changing when unwrapping doesn't return to old value and remains un-changed
I try to create some correct XAML to arrange text in the ComboBox to the right, but I cannot.
Here is my XAMl...
Any clue what I am missing?
Thank you!
<ComboBox Height="25"
HorizontalAlignment="Left"
ItemsSource="{Binding NonArchivedSequences}"
SelectedItem="{Binding SelectedSequence}"
Margin="0,0,0,4"
Name="cbSequences"
VerticalAlignment="Top"
Width="504"
HorizontalContentAlignment="Stretch"
SelectionChanged="cbSequences_SelectionChanged"
Grid.Column="1">
<ComboBox.Resources>
<DataTemplate x:Key="DataTemplateSequenceData">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Margin="4,2,2,4"
TextWrapping="Wrap"
Text="{Binding Interval}"
d:LayoutOverrides="Width, Height"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
<TextBlock Margin="4,2,2,4"
TextWrapping="Wrap"
Text="{Binding Name}"
d:LayoutOverrides="Width, Height" Grid.Column="1"
VerticalAlignment="Center"
HorizontalAlignment="Left" />
</Grid>
</DataTemplate>
</ComboBox.Resources>
<ComboBox.ItemTemplate>
<StaticResource ResourceKey="DataTemplateSequenceData"/>
</ComboBox.ItemTemplate>
</ComboBox>
Maybe HorizonalAllignment="Right" You have Left
If I have two elements in a stackpanel:
<StackPanel Margin="2,2,2,2" Orientation="Horizontal">
<TextBlock Grid.Column="0" Text="{Binding Name}" />
<TextBox Grid.Column="1" Text="{Binding Age}"/>
</StackPanel>
How can I set them with the width equally 50%,50%?
To answer your comment
<Grid>
<!-- Define Columns -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Text="{Binding Name}" />
<TextBox Grid.Column="1" Text="{Binding Age}"/>
</Grid>
use UnformGrid with columns 2 or Grid with 2 columns
<UniformGrid Columns="2">
<TextBox></TextBox>
<TextBox></TextBox>
</UniformGrid>
or
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0"
Text="{Binding Name}" />
<TextBox Grid.Column="1"
Text="{Binding Age}" />
</Grid>
Please help me to edit XAML so the TextBlock which shows minutes goes to the right top corner.
<StackPanel Orientation="Horizontal" >
<StackPanel Orientation="Horizontal" >
<TextBlock Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >#</TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
</StackPanel>
</StackPanel>
So it should be like
I would use a DockPanel. For the child nodes, just add DockPanel.Dock attributes to indicate where you want the element to go. The last child element will automatically fill the remaining area.
<DockPanel>
<TextBlock DockPanel.Dock="Right" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
<StackPanel Orientation="Horizontal" >
<TextBlock Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >#</TextBlock>
<TextBlock FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
</StackPanel>
</DockPanel>
If I were doing this I would use a grid rather than a horizontal stack panel:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Name="UserNameTextBlock" Margin="0,0,8,0" VerticalAlignment="Bottom" FontSize="15" Text="{Binding Path=UserName}" FontWeight="Bold"></TextBlock>
<TextBlock Grid.Column="1" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Foreground="LightGray" >#</TextBlock>
<TextBlock Grid.Column="2" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="ScreenNameTextBlock" Text="{Binding Path=ScreenName}" Foreground="Gray" ></TextBlock>
<TextBlock Grid.Column="4" FontSize="13" VerticalAlignment="Bottom" Padding="0,0,0,1" Name="MinAgo" Text="{Binding Path=MinAgo}" Foreground="Gray" ></TextBlock>
</Grid>
Note the * in the column 3 which means that column will use all available space after column 2, except for what is needed by column 4.
Don't use a StackPanel but a Grid with columns?
I have a listbox containing itemtemplate like this
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<DockPanel>
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold" />
<TextBlock Text="{Binding [1]}"></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
</Grid>
<StackPanel VerticalAlignment="Top" HorizontalAlignment="Right" DockPanel.Dock="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1" HorizontalAlignment="Right"></Button>
</StackPanel>
</DockPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This listbox is in first column of a grid which has a splitter.
Now problem is that I am not able to align the button to right side of listbox item.
One Grid is enough here. You only need one star-sized column (for content) and one Auto-sized column (for the button):
<ListBox Name="lstCompany" Grid.Column="0" MinWidth="200" Grid.Row="1" HorizontalAlignment="Stretch" Margin="2,2,2,2" VerticalAlignment="Stretch" HorizontalContentAlignment="Stretch" ItemsSource="{Binding}" SelectionChanged="lstCompany_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate >
<Grid Name="grid1" VerticalAlignment="Top" Margin="2" HorizontalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<TextBlock Text="{Binding [0]}" FontWeight="Bold"/>
<TextBlock Text="{Binding [1]}" ></TextBlock>
<StackPanel.ToolTip>
<ToolTip>asdf</ToolTip>
</StackPanel.ToolTip>
</StackPanel>
<StackPanel Grid.Column="1" VerticalAlignment="Top" HorizontalAlignment="Right">
<Button Content="X" Tag="{Binding [2]}" Width="20" Click="btnRemove_Click" Name="btnRemove1"></Button>
</StackPanel>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>