Listbox showing second item first - silverlight

I am currently sitting on a Silverlight-Listbox and have some
trouble getting my listBox right.
Its (visually) starts from the second item.
I have to scroll up to see the first one.
Why is this happening and how could I fix this?
<ListBox x:Name="ServingsList"
Foreground="White"
Background="#FFB88A8A"
SelectionChanged="servingSelected"
Margin="0,0,0,297">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Height="70" Width="432">
<Rectangle x:Name="Linie"
Fill="#FF8D8D8D"
HorizontalAlignment="Right"
Height="2"
StrokeThickness="0"
VerticalAlignment="Top"
Width="380"
Margin="0,-30,0,0" />
<TextBlock x:Name="ServingTitel"
TextWrapping="Wrap"
Text="{Binding name}"
FontSize="21.333"
Margin="50,-60,0,0" />
<Image x:Name="Ribbon"
HorizontalAlignment="Right"
Height="30"
VerticalAlignment="Top"
Width="151"
Source="/TEX/GrayRibbon.png"
Stretch="UniformToFill"
Margin="0,-60,0,0" />
<TextBlock x:Name="Kcal"
TextWrapping="Wrap"
Text="{Binding kalorien]}"
FontSize="18.667"
Height="23"
Margin="0,-92,8,0"
TextAlignment="Right" />
<Button Content="1"
Width="55" Height="55"
BorderThickness="3"
FontSize="18.667"
Padding="-1,-2,0,0"
Margin="-400,-87,0,0"
FontWeight="Bold"
Click="servingButtonClicked" />
</StackPanel>
</DataTemplate>
</ListBox>

You need to check your Margin values - in the main list you're putting 297 pixels of whitespace below your list box. Other elements have weird values too. Expression Blend sometimes messes with the Margins if you change from a StackPanel to a Grid.
e.g:
Margin="0,0,0,297">

Related

Put TextBlock on top of another TextBlock

I tried to implement case in which one TextBlock appears on top of another TextBlock, playing with Visibility property - but it doesn't working yet.
TextBlock are inside DockPanel:
<DockPanel Grid.Row="1" Margin="5">
<TextBlock Text="Text1" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right">
<TextBlock Text="Text2" Background="Aqua" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Visibility="{Binding IfDeviceSelected, NotifyOnSourceUpdated=True, Converter={StaticResource ResourceKey=BoolToVisibilityConverter}}" />
</TextBlock>
<TextBlock Text="#Device Focus:" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>
You will want to use a Grid to group these TextBlocks, DockPanel/StackPanel will not allow overlapping controls(without horrible manipulation of Margins etc)
<DockPanel Grid.Row="1" Margin="5" >
<Grid DockPanel.Dock="Right" >
<TextBlock Text="Text1" />
<TextBlock Text="Text2" Background="Aqua" Visibility="{Binding IfDeviceSelected, NotifyOnSourceUpdated=True, Converter={StaticResource ResourceKey=BoolToVisibilityConverter}}" />
</Grid>
<TextBlock Text="#Device Focus:" Height="20" HorizontalAlignment="Right" DockPanel.Dock="Right" />
</DockPanel>

Why won't the WPF progressbar stretch to fit?

This is my original code:
<StackPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" Orientation="Horizontal">
<ProgressBar Height="23" Name="searchProgressBar" Foreground="Blue" BorderBrush="#00000000" BorderThickness="1" VerticalAlignment="Top" HorizontalAlignment="Stretch"/>
<TextBlock Text="asdf" Height="23" Name="progressTextBlock" VerticalAlignment="Top" Foreground="Red" HorizontalAlignment="Right"/>
</StackPanel>
The progressbar was very small, maybe 2 or 3 pixels wide, then there was the text block and empty space after. So I tried explicitly docking the elements to sides:
<DockPanel Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2" >
<ProgressBar DockPanel.Dock="Left" Height="23" Name="searchProgressBar" Foreground="Blue" BorderBrush="#00000000" BorderThickness="1" VerticalAlignment="Top" />
<TextBlock DockPanel.Dock="Right" Text="asdf" Height="23" Name="progressTextBlock" VerticalAlignment="Top" Foreground="Red" HorizontalAlignment="Right"/>
</DockPanel>
No avail. I also tried modifying each solution by setting HorizontalAlignment="Stretch" on the progress bar, but there's no change. How do i stretch it to fill all the space there is after the text block has been rendered?
Remove DockPanel.Dock="Left" from the ProgressBar and switch the order of the controls:
<DockPanel>
<TextBlock DockPanel.Dock="Right" Height="23" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<ProgressBar Height="23" VerticalAlignment="Top" />
</DockPanel>
By default, DockPanel has its property LastChildFill set to true, which will make the ProgressBar take the available space.
ahh I see what you're trying to do. This is probably a better place to use a grid with 2 column definitions. The first(the left one) columndefinition with Width="*" and the second(the right one) with a width set to Width="Auto". For more info about auto vs * see http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/9a7e6591-1fae-4295-b68a-be97e8e53d06/

wp7 listbox bouncing - items at bottom of list

I've noticed that the last items in my list box don't scroll up freely. They almost "bounce" when I try to move them up. The effect is even worse when I have the SIP active. I can't scroll the bottom items up the screen. They stay on the bottom of the screen and I can't see them (or they are partially blocked).
Any ideas on how to correct this situation?
<ListBox VerticalAlignment="Top">
<Grid>
<TextBox Height="72" Margin="109,10,0,0" HorizontalAlignment="Left" Name="txt1" Text="" VerticalAlignment="Top" TextWrapping="Wrap" Width="341" InputScope="Text"/>
<TextBox Height="72" Margin="109,70,267,0" HorizontalAlignment="Left" Name="txt2" Text="0" VerticalAlignment="Top" Width="80" InputScope="Number" />
<TextBox Height="72" Margin="0,70,73,0" HorizontalAlignment="Right" Name="txt3" Text="0" VerticalAlignment="Top" Width="80" InputScope="Number"/>
<TextBox Height="131" Margin="12,160,0,0" HorizontalAlignment="Left" Name="txt4" Text="" VerticalAlignment="Top" TextWrapping="Wrap" Width="438" InputScope="Text"/>
<TextBox Height="72" Margin="12,320,0,147" HorizontalAlignment="Left" Name="txt5" Text="" VerticalAlignment="Top" Width="438" InputScope="Text"/>
<TextBlock Height="30" Margin="47,30,333,0" Name="lbl1" Text="Dosage" VerticalAlignment="Top" />
<TextBlock Height="30" Margin="10,90,332,0" Name="lbl2" Text="Quantity" VerticalAlignment="Top" />
<TextBlock Height="30" Margin="0,90,142,0" Name="lbl3" Text="Refills" VerticalAlignment="Top" HorizontalAlignment="Right"/>
<TextBlock Height="37" Margin="24,135,212,0" Name="lbl4" Text="Additional Instructions" VerticalAlignment="Top" />
<TextBlock Height="30" Margin="24,293,0,0" Name="lbl5" Text="Reason for Taking" HorizontalAlignment="Left" VerticalAlignment="Top" />
<TextBlock Height="30" Margin="24,385,0,0" Name="lbl6" Text="Consumption Frequency:" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="27,417,0,0" Name="lblday1" Text="Sun" VerticalAlignment="Top" Width="37" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="83,417,0,0" Name="lblday2" Text="Mon" VerticalAlignment="Top" Width="46" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Right" Margin="0,417,272,0" Name="lblday3" Text="Tue" VerticalAlignment="Top" Width="37" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="203,417,0,0" Name="lblday4" Text="Wed" VerticalAlignment="Top" Width="46" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="263,417,0,0" Name="lblday5" Text="Thur" VerticalAlignment="Top" Width="46" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="329,417,0,0" Name="lblday6" Text="Fri" VerticalAlignment="Top" Width="37" />
<TextBlock FontWeight="Bold" Height="30" HorizontalAlignment="Left" Margin="388,417,0,0" Name="lblday7" Text="Sat" VerticalAlignment="Top" Width="37" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="15,431,0,0" Name="chkSun" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="75,431,0,0" Name="chkMon" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="135,431,0,0" Name="chkTue" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Right" Margin="0,431,202,0" Name="chkWed" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="255,431,0,0" Name="chkThu" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="315,431,0,0" Name="chkFri" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
<CheckBox Content="CheckBox" Height="72" HorizontalAlignment="Left" Margin="375,431,0,0" Name="chkSat" VerticalAlignment="Top" VerticalContentAlignment="Top" Width="59" />
</Grid>
</ListBox>
UPDATE:
OK, I sort of answered my own question. At least I found an initial answer to my own question. What I did to correct the bouncing is to modify the height property in the .
<Grid Height="800">
Now when the SIP is active the bottom items are visible with plenty of room to spare.
As I said above, I found an answer. I don't know if it was the right answer. If you have a better way, please let me know.
When I was testing this, yes, when the SIP is active I can initially move freely to the bottom. However, when I move try to move back up I get the bounce effect again. Is there something that I need to add to allow it to move freely up and down?
The problem in general is that the Listbox doesn't know how tall it is. You can solve it by setting an explicit height on it's parent, sure. A better way to do it would be to define a row for it in the grid:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<ListBox Grid.Row="0">
...
</ListBox>
</Grid>
The Height="*" says the row should take the entire space of it's container.
OK, I answered my own question. At least I found an answer to my own question. What I did to correct the bouncing is to modify the height property in the .
<Grid Height="800">
Now when the SIP is active the bottom items are visible with plenty of room to spare.
As I said above, I found an answer. I don't know if it was the right answer. If you have a better way, please let me know.

retrieving the content properties from data template in wpf

I have a particular template for a listbox item which contains different textblocks. After adding the items in the listbox I want to retrieve the text of a particular textblock of a particular listbox item. How can I do that?
<ListBox x:Name="listBox1" Grid.Row="0" SelectionChanged="listBox1_SelectionChanged">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Margin="0,2,0,0">
<CheckBox Name="cbSelect" VerticalAlignment="Center" Visibility="{Binding isVisible}"/>
<StackPanel Orientation="Vertical">
<Grid HorizontalAlignment="Stretch" >
<TextBlock Name="txtTitle" VerticalAlignment="Bottom" Text="{Binding Title}" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Name="txtDate" Foreground="{StaticResource PhoneInverseInactiveBrush}" HorizontalAlignment="Right" VerticalAlignment="Center" Text="{Binding CreatedOn}" Margin="0,0,30,0" Style="{StaticResource PhoneTextSmallStyle}" />
<!-- <Image x:Name="lineImg" Source="/Icons/appbar.next.rest.png" HorizontalAlignment="Right" VerticalAlignment="Bottom" Width="48" Height="48"/>-->
</Grid>
<TextBlock Name="txtContent" Foreground="{StaticResource PhoneDisabledBrush}" VerticalAlignment="Bottom" Text="{Binding Content}" Style="{StaticResource PhoneTextNormalStyle}" />
<Line Stroke="{StaticResource PhoneBorderBrush}" StrokeThickness=" 2" X1="0" Y1="0" X2="{Binding ElementName=listBox1, Path=ActualWidth}" Y2="0" Margin="0,6,0,0" ></Line>
<!-- <Image x:Name="lineImg" Source="/Icons/Line.png" HorizontalAlignment="Center" Width="500" Height="2" Margin="0,15,0,0" />-->
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
In the above code, after adding the items to the listbox, I want the text of txtTitle of a particular item. How can I get it?
You need to get a reference to the ContentPresenter of the item.
ListBoxItem myListBoxItem = (ListBoxItem)(myListBox.ItemContainerGenerator.ContainerFromItem(myListBox.Items.CurrentItem));
ContentPresenter myContentPresenter = FindVisualChild<ContentPresenter>(myListBoxItem);
DataTemplate myDataTemplate = myContentPresenter.ContentTemplate;
TextBlock myTextBlock = (TextBlock)myDataTemplate.FindName("textBlock", myContentPresenter);
The FindVisualChild method along with the full example can be found here.

Can't get focus on a TextBox inside a ListBox using Silverlight

I'm having a little trouble in silverlight with a databound ListBox containing databound TextBox elements. The items display correctly in the list and the TextBox is populated correctly but I can't get focus on the TextBox in the list. If I hover over the edges of the TextBox it highlights but it won't let me click into it to edit the text. Any ideas?
My XAML looks like this:
<ListBox x:Name="listImages">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="LayoutRoot" Background="White">
<Image Height="102" HorizontalAlignment="Left" Name="imgThumb" Stretch="UniformToFill" VerticalAlignment="Top" Width="155" Source="{Binding ImageFilename, Converter={StaticResource ImageConverter}}" />
<TextBox Height="23" HorizontalAlignment="Left" Margin="154,25,0,0" Name="txtAltText" VerticalAlignment="Top" Width="239" Text="{Binding Alt}" />
<dataInput:Label Height="19" HorizontalAlignment="Left" Margin="154,6,0,0" Name="lblAltText" VerticalAlignment="Top" Width="239" Content="Alt Text" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
I swapped the content for this and it now works, I think it was having an issue with the Grid container:
<ListBox x:Name="listImages">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Image Height="102" HorizontalAlignment="Left" Name="imgThumb" Stretch="UniformToFill" VerticalAlignment="Top" Width="155" Source="{Binding ImageFilename, Converter={StaticResource ImageConverter}}" Margin="5" />
<StackPanel>
<dataInput:Label Height="19" HorizontalAlignment="Left" Name="lblAltText" VerticalAlignment="Top" Width="239" Content="Alt Text" />
<TextBox Height="23" HorizontalAlignment="Stretch" Name="txtAltText" VerticalAlignment="Top" Text="{Binding Alt}" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>

Resources