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>
Related
I have a group box containing some bound data:
<Grid Grid.Column="1" Background="#eeeeee" Margin="10,0,0,0" width="250">
<GroupBox Padding="5" Header="Lists">
<ListBox x:Name="ListBox" BorderBrush="#FFECECEC" ItemsSource="{Binding Lists}" SelectionChanged="Panel_SelectionChanged" >
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" >
<TextBlock Text="{Binding Name}" Style="{StaticResource Pan}" HorizontalAlignment="Left" />
</Grid>
<Grid Grid.Column="1" HorizontalAlignment="Right" >
<Button Style="{StaticResource Del}" Width="30" Height="30" Margin="5,0,0,0">
<Image Source="../Resources/Delete2.png" Width="32" />
</Button>
</Grid>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</GroupBox>
</Grid>
The issue is that the two columns containing the text box and delete button arn't spanning correctly. Check out the screenshot:
Add this property to your ListBox
HorizontalContentAlignment="Stretch"
I can't find a way to make these images in a scrollviewer horizontally.
They're like this
IMAGE1
IMAGE2
IMAGE3
I want
IMAGE1 IMAGE2 IMAGE3
So I can scroll them horizontally. I've already tried google and stackoverflow and I can't find a working solution :(
Code
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Disabled"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
I am not sure you are speaking about images, Image1 Image2 Image3. You would have mentioned them in the given code snippet. As I am not sure about the ques, I have added 2 scenarios.
Scenario 1: I could see 3 Image control in the 0th Column. If you need them to be shown horizontally, you could use StackPanel instead of Grid, and can use the Orientation property as Horizontal. or you need to add 3 columns to the 0th Column Grid, and you can add those images respectively.
Scenario 2: and in the 1st Grid, you have a scrollviewer, if you need the image controls to be visible horizontally inside those, the same you could use the Orientation property of StackPanel (stackpanel inside the wrappanel) to Horizontal instead of Vertical.
Hope this helps you.
<ScrollViewer HorizontalScrollBarVisibility="Visible">
<StackPanel Orientation="Horizontal">
<Button Content="Button1" Foreground="Red" />
<Button Content="Button2" Foreground="Red" />
<Button Content="Button3" Foreground="Red" />
<Button Content="Button4" Foreground="Red" />
<Button Content="Button5" Foreground="Red" />
<Button Content="Button6" Foreground="Red" />
</StackPanel>
</ScrollViewer>
Try this way, adding a custom panel template to your listbox that is horizontal.
<Window x:Class="TESSTTTTTT.MirrorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MirrorWindow" HorizontalAlignment="Center" VerticalAlignment="Center" WindowStyle="None">
<Grid Name="grid2" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Name="ColumnKinect">
<Image Name="camera2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center"/>
<!--
<Canvas Name="canvas2" Height="1800" Width="3200" HorizontalAlignment="Center" VerticalAlignment="Center" Visibility="Hidden" />-->
<Image Name="imgBodyFrame" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200"/>
<!--Stretch="UniformToFill"-->
<Image Name="img3DBodyRotation" Source="{Binding MainWindow.ImageSource}" Height="1800" Width="3200" Visibility="Hidden"/>
</Grid>
<Grid Grid.Column="1" Height="1800" Width="3200" HorizontalAlignment="Stretch" VerticalAlignment="Top" Name="ColumnCatalogo">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ScrollViewer Grid.Row="0" Name="scrollViewerCatalogo" Background="AliceBlue"
HorizontalScrollBarVisibility="Visible"
VerticalScrollBarVisibility="Visible">
<ItemsControl Grid.Row="0" Name="itemsControl" HorizontalAlignment="Center" VerticalAlignment="Stretch">
<ItemsControl Name="itcCatalogo" HorizontalContentAlignment="Left">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<ListBox Width="Auto" Height="Auto" HorizontalContentAlignment="Left">
<WrapPanel Orientation="Horizontal" Width="Auto" Height="Auto">
<StackPanel Name="stpProduct" Orientation="Vertical">
<TextBlock Width="Auto" Height="Auto" Text="{Binding Nome}" Foreground="#006b66" FontFamily="Verdana" FontSize="14" FontWeight="ExtraBold"/>
<Image Width="400" Height="300" Source="{Binding PathImmagine}"/>
<TextBlock Width="Auto" Height="Auto" Foreground="#006b66" FontFamily="Verdana" FontSize="20" FontWeight="Bold">
<Run Text="Prezzo a partire da: "/>
<LineBreak/>
<Run Text="{Binding Prezzo}"/>
<Run Text="€"/>
</TextBlock>
<TextBlock Width="Auto" Height="Auto" Text="{Binding Rigidita}" Foreground="Gray" FontFamily="Verdana" FontSize="20" FontWeight="ExtraBold"/>
</StackPanel>
</WrapPanel>
</ListBox>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ItemsControl>
</ScrollViewer>
</Grid>
</Grid>
</Window>
I have 2 textblocks in a listbox datatemplate.
I want to display list of names in alphabetical order. The first textblock should show the first character of names only at the start of the string with that character and the second textblock should show the string.
Please check the below link
http://i.stack.imgur.com/4mdtu.png
It is like:
A Ana
Andrew
Andy
B Bane
Bob
C Chris
Christian
Catherine
I tried this:
XAML:
<ListBox Height="331" Name="lstBoxPlayers" MinHeight="200" MinWidth="150" Margin="0,0,0,20" SelectionChanged="lstBoxPlayers_SelectionChanged"
Tap="lstBoxPlayers_Tap" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderBrush="Black" BorderThickness="0,0,0,1" MinWidth="200" Margin="0,0,0,0" Grid.Column="0">
<Grid Background="White" MinWidth="200" Height="50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="Abrev" Text="{Binding Path=PlayerShortName[0]}" FontSize="30" Foreground="Black" Height="Auto" Width="26" TextAlignment="Center">
</TextBlock>
<TextBlock Grid.Column="1" Text="{Binding PlayerShortName}" Foreground="Black" FontSize="16" Height="29" MaxWidth="160" Margin="-25,0,0,0" TextAlignment="Center">
</TextBlock>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
code behind:
lstBoxPlayers.ItemsSource = PlayerList; //List of string
You can use GroupBy to form Alphabetic groups and then bind the resultant Collection of groups to the ListBox..
The code behind would look like:
lstBoxPlayers.ItemsSource = PlayerList.GroupBy( p => p.PlayerShortName[ 0 ] );
And the Xaml in you Grid would look like:
<!--Key of the Group-->
<TextBlock x:Name="Abrev" Text="{Binding Path=Key}" FontSize="30" Foreground="Black" Height="Auto" Width="26" TextAlignment="Center" VerticalAlignment="Top"></TextBlock>
<!--Values of the Group-->
<ItemsControl Grid.Column="1" ItemsSource="{Binding}" Margin="-25,0,0,0" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Grid.Column="1" Text="{Binding PlayerShortName}" Foreground="Black" FontSize="16" Height="29" MaxWidth="160" TextAlignment="Center"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
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>
I created user control with the textblock. But it will not wrap. This user control servers as a listboxitem.
<Grid x:Name="MainGrid" Height="Auto" Width="Auto">
<StackPanel Orientation="Horizontal">
<Image Height="50" Width="100" Stretch="Uniform" Name="image1" Source="{Binding Path=VideoImageUrl}" Margin="12,12,13,84" MouseLeftButtonDown="image1_MouseLeftButtonDown" MouseEnter="image1_MouseEnter" MouseLeave="image1_MouseLeave" />
<StackPanel Orientation="Vertical" >
<TextBlock TextWrapping="Wrap" Height="Auto" HorizontalAlignment="Left" Name="titleTextBox"
Text="{Binding Path=Title, Mode=TwoWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" FontSize="14" FontWeight="SemiBold" />
<StackPanel Orientation="Vertical" x:Name="StackPanelDetails">
<TextBlock Height="Auto" HorizontalAlignment="Left" Name="desciptionTextBox"
TextWrapping="Wrap"
Text="{Binding Path=Desciption, Mode=OneWay, ValidatesOnExceptions=true, NotifyOnValidationError=true}"
VerticalAlignment="Center" Width="Auto" />
<Line />
<ItemsControl x:Name="CustomItemsSource" ItemsSource="{Binding Path=LinksList}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock>
<Hyperlink NavigateUri="{Binding Path=TopicUrl}" RequestNavigate="Hyperlink_RequestNavigate" >
<TextBlock Text="{Binding Path=TopicName}" />
</Hyperlink>
</TextBlock>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
A ListBox's default template does not automatically limit the width of its items, but instead uses a ScrollViewer, which shows a horizontal scrollbar when an item is wider than the ListBox.
You can remove the ScrollViewer by replacing the ListBox's Template:
<ListBox ...>
<ListBox.Template>
<ControlTemplate>
<StackPanel IsItemsHost="True"/>
</ControlTemplate>
</ListBox.Template>
...
</ListBox>
Another important thing to note is that a StackPanel in the top-level Grid won't properly resize the contained elements. In the following simplified example the text in the TextBlock is not wrapped because the containing StackPanel simply does not resize it as you expect:
<Grid>
<StackPanel Orientation="Horizontal">
<Image ... />
<Text TextWrapping="Wrap" Text=... />
</StackPanel>
</Grid>
This way it works as you expect:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Image ... />
<TextBlock Grid.Column="1" TextWrapping="Wrap" Text=... />
</Grid>