We Keep Coding

vertical scrollviewer bug in windows phone 8.1 c#

I have a page with lots of data so I need to use scrollviwer because of overflow items.
In this page I have something like list view (I made that) that has lots of items so I need to use scrollviewer for this list too.
So I have 2 vertical scrollviewer:
1) for all page items.
2) for My list view.
I made this app for windows phone 8.1. When I want to scroll in my list view I cant because of all page scrollviewer.
How can I solve that?
My code:
<ScrollViewer x:Name="ScrollViewerAllPage" Grid.Row="1" Grid.Column="0" Background="White" HorizontalScrollBarVisibility="Visible" ZoomMode="Disabled">
<Grid>
<StackPanel x:Name="StackMain" Orientation="Horizontal" Visibility="Collapsed">
...
<ScrollViewer x:Name="ScrollViewerReport" ScrollViewer.VerticalScrollMode="Enabled" Margin="32,0" Background="White" VerticalScrollBarVisibility="Visible" ZoomMode="Disabled" PointerPressed="ScrollViewerReport_PointerPressed">
<Grid x:Name="StackPanelReport" ScrollViewer.VerticalScrollBarVisibility="Visible" Margin="10,0" HorizontalAlignment="Center">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="75" />
<ColumnDefinition Width="70" />
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="1" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="2" Orientation = "Vertical">
...
</StackPanel>
</StackPanel>
<StackPanel Grid.Column="3" Orientation = "Vertical">
...
</StackPanel>
</Grid>
</ScrollViewer>
</StackPanel>
</Grid>
I am sorry for bad English.
Thanks.

Array of custom Controls in WPF

I need to create Listbox in C#/WPF which contains the following
Something which is like a multi column list box,
One field for text, second field contains text which is to be chosen from a Combo Box.
I need to know the selection event so that I can validate the selection.
I am making a kind of mapping between two texts and the first field of text is not selectable, the second field to be selected from the combobox.
I need to put it in a box which is scrollable.
So my questions are
Is it possible to build such a thing using C#/WPF.
How do I trigger a window containing a listbox and capturing the selected item.
Lets Say
I have a signal A1, A2, A3
I need to map them to signal B1, B2, B3
So I want to show two rows of text
I want to get which signal got selected and then assign it to the correct row.
[edit]
Ok So I think it is possible to build one, I tried something with the following XAML code,
But I could not get the listbox to resize correctly and the data binding is still not Ok. Need to capture the Combobox selection too. :D
<Grid>
<ListBox Name="Mapping" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,5,0,0"
ItemsSource="{Binding Source=StaticResource CanMainPageViewModel.MappingInformation}"
>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=CanMainPageViewModel.MappingInformation.SigName}" Grid.Column="0" MinWidth="200" VerticalAlignment="Top" HorizontalAlignment="Stretch" FontSize="8"/>
<ComboBox Grid.Column="1" MinWidth="200" VerticalAlignment="Top" HorizontalAlignment="Stretch" FontSize="8"/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
So my problem still remains,
[EDIT]
So playing around I found this can solve my problems now
<UserControl x:Class="Caribou_wpf.Controls.CanMostSignalMappingControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:controls="clr-namespace:Caribou_wpf.Controls"
xmlns:CanMainPageViewModel="clr-
namespace:Caribou_ViewModel.Data.CAN;assembly=Caribou_ViewModel"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="300">
<UserControl.Resources>
<DataTemplate x:Key="MappingInfoTemplate">
</DataTemplate>
</UserControl.Resources>
<Grid>
<ListBox Name="Mapping" HorizontalAlignment="Stretch"
VerticalAlignment="Stretch" Margin="0,5,0,0"
ItemsSource="{Binding CanMainPageViewModel.MappingInformation.Signals}"
>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=CanSignal.SigName}"
Grid.Column="0" MinWidth="200" VerticalAlignment="Top"
HorizontalAlignment="Left" FontSize="10"/>
<ComboBox Grid.Column="1" MinWidth="200"
VerticalAlignment="Top" HorizontalAlignment="Right" FontSize="10"
ItemsSource="{Binding Path=MostPropertyParam}"
DisplayMemberPath="Name"
/>
</Grid>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
I just need to make sure that all items are ReadOnlyCollection
But somehow the controls are always sticking to the left. Can anyone point out please , why it is so.
Now how do I capture which object index is triggering the selected item in the combobox?
Thanks a lot.

Here is how I did it
<ListBox Name="Mapping" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,5,0,0"
ItemsSource="{Binding CanMainPageViewModel.MappingInformation.Signals}"
BorderThickness="1"
>
<ListBox.ItemTemplate >
<DataTemplate>
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Top">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Path=CanSignal.CompleteSignalName}" Grid.Column="0" MinWidth="280" FontSize="11" FontFamily="Calibri"
HorizontalAlignment="Stretch" TextAlignment="Right" Margin="5,2,3,2"/>
<ComboBox Grid.Column="1" MinWidth="280" FontSize="11" FontFamily="Calibri"
ItemsSource="{Binding Path=MostPropertyParameters}"
DisplayMemberPath="ParCompleteParamName" HorizontalContentAlignment="Stretch" Margin="3,2,5,2"
SelectedIndex="{Binding Path=SelectedMostPropertyParamIndex, Mode=TwoWay}"
/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemContainerStyle>
<Style TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch"></Setter>
</Style>
</ListBox.ItemContainerStyle>
</ListBox>

Xaml, middle column not taking up full width

How do I make my middle column take up the full width available while allowing space for the comment section so that all those comment boxes are nicely aligned to the right:
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1">
<TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap"/>
<TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
</StackPanel>
<StackPanel Height="60" Grid.Column="2" Margin="10,0,0,0">
<StackPanel.Background>
<ImageBrush Stretch="Fill" ImageSource="/Assets/Icons/CommentsIcon.png"/>
</StackPanel.Background>
<TextBlock Text="{Binding comments.Count}" HorizontalAlignment="Center" FontSize="20" Foreground="Black" TextAlignment="Center" Padding="0,8,0,0"/>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
I tried placing horizontal align on the third stackpanel but that actually didn't work.
EDIT: Thanks for the tries but no cigar:

You need to alter the style of the ListBoxItem itself to ensure that the content is stretched across the available width.
Define this style:
<Style x:Key="ListBoxItemStyle" TargetType="ListBoxItem">
<Setter Property="HorizontalContentAlignment" Value="Stretch" />
<Setter Property="HorizontalAlignment" Value="Stretch" />
</Style>
Then the Right alignment of the "Comments" image will work and the central text box will stretch to fill the available space.
You might find that just using a StackPanel with an horizontal orientation works better than a Grid for the item template, especially if the data in columns 0 and 2 are a constant width.

Play around with the space given for the columns, for example:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="3*"/>
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
This gives the center column 3 times more space than the right column

It's hard to tell exactly what you want because of how you've blurred your image. But I think the key is to make the container of the grid take up all available space, HorizontalAlignment="Stretch".
<DataTemplate>
<StackPanel HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60" />
</Grid.ColumnDefinitions>
<!-- items here -->
</Grid>
</StackPanel>
The item you set to have Grid.Column="0" will have width 67dip, the one with Grid.Column="2" will be width 60dip, and the one with Grid.Column="1"will fill up the rest of the space.
dip = device independent pixels - all Windows Phone apps are measured as if the screen is 480x800 and then rendered at the actual resolution of the screen.

Inside a StackPanel you can't do HorizontalAlignment to right while its orientation is LeftToRight, as far as I know. Avoid using it.

The problem stems from using a StackPanel as the top-most UIElement. Use a Grid instead and follow the rest of this advice:
Right align content in ListBox
Which leads to this answer as well:
C# windows phone -Alignment in xaml ListBox.ItemTemplate

Your problem is the Button, if it's not mandatory try deleting it and add a "Tap" Event to the StackPanel, i've tried it and it works.
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel Tap="...">
// no <Button> here
<Grid>
---
</Grid>
// no </Button> here
</StackPanel>
</DataTemplate>
better option
<DataTemplate x:Key="ActivityStreamItemTemplate">
<Grid Tap="...">
...
</Grid>
</DataTemplate>

3 column grid for xaml is not taking up expected space

I have the following xaml:
<DataTemplate x:Key="ActivityStreamItemTemplate">
<StackPanel VerticalAlignment="Top" Margin="5,0,0,0">
<Button Command="{Binding Path=DataContext.LoadSpacesCommand, ElementName=OrganisationList}" CommandParameter="{Binding}" Padding="-5,0,-5,-5" Margin="-7,-12,-7,-7" Height="auto" BorderThickness="0" HorizontalAlignment="Left" VerticalAlignment="Stretch" HorizontalContentAlignment="Left" UseLayoutRounding="True" FontSize="0.01">
<Grid Height="auto">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="67" />
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="67" />
</Grid.ColumnDefinitions>
<StackPanel Height="auto" Grid.Column="0" Background="Transparent">
<Border Background="Transparent" BorderThickness="0" Width="62" Height="62" HorizontalAlignment="Left" Margin="0,0,0,5">
<Image Source="{Binding created_by.image.link}" Width="62" Height="62"></Image>
</Border>
</StackPanel>
<StackPanel Height="auto" Grid.Column="1">
<TextBlock Text="{Binding type}" HorizontalAlignment="Left" FontSize="30" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
<TextBlock Text="{Binding ttitle}" HorizontalAlignment="Left" FontSize="15" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" TextWrapping="Wrap" MaxWidth="Infinity" />
<TextBlock Text="{Binding created_by.name}" HorizontalAlignment="Left" FontSize="11" VerticalAlignment="Center" Margin="0,0,0,5" Foreground="White" />
</StackPanel>
<StackPanel Height="auto" Grid.Column="2">
<TextBlock Text="{Binding comment_count}"></TextBlock>
</StackPanel>
</Grid>
</Button>
</StackPanel>
</DataTemplate>
As you can see I would like to have the first column of my grid set to 67.. perfect, and working fine...
The next column needs to fill as much as it can of the screen minus the extra columns width after it.
How do I go about doing this?
Kind of linked to this: How to TextWrap a TextBlock within a width Auto Column? but I couldn't get the * thing to work... I'm not sure it really does what I need it to do

It's because you've got:
MaxWidth="Infinity"
on your TextBlock and
<ColumnDefinition Width="Auto"/>
on your column.
This means that the XAML thinks it can grow that column as much as it likes to fit the text in.
If you want the text to wrap you'll have to provide a limit to either the width of the column, the width of the grid or the width of the stack panel.
If you want the middle column to take the remaining space then just specify it's width with a *:
<ColumnDefinition Width="*"/>

How to generically repeat the style of a listboxitem in Silverlight / Windows phone 7

I have a ListBox and I need to repeat the styles to be the same for all the listbox items. Only the placeholders are going to change. For example, the following listbox item has three elements - An Image, a header text and a description text. I have styled it. Now I need to apply the same style for the listboxitems that I follow. Currently I am doing a copy paste for all the items which is not the right way.
I can do this via ListBoxTemplate and DataTemplate but I need to write the code in .cs file which I don't want to. Help me how to achieve the template effect ?
Here is the code for the above listboxitem.
<ListBoxItem>
<Grid Height="80">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="/Images/dark/appbar.magnify.png"/>
<StackPanel Grid.Column="1">
<TextBlock Text="Item heading" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="item description" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</Grid>
</ListBoxItem>
I need place holder for the image, header text and content text in all the listboxitems that I add. How to achieve this?

This is how you can achieve it :
<Page.Resources>
<DataTemplate x:Key="ListTemplate">
<Grid Height="80">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="/Images/dark/appbar.magnify.png"/>
<StackPanel Grid.Column="1">
<TextBlock Text="{Binding ItemHeading}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}"/>
<TextBlock Text="{Binding ItemDescription}" TextWrapping="Wrap" Style="{StaticResource PhoneTextSubtleStyle}"/>
</StackPanel>
</Grid>
</DataTemplate>
</Page.Resources>
<Grid>
<ListBox ItemTemplate="{StaticResource ListTemplate}" ItemsSource="{Binding YourList}">
</ListBox>
</Grid>
You can put the Resource in App.XAML so it can be accessed by all pages, and you can use it on all ListBoxes in your Application. Note that elements in your YourList should have ItemHeader and ItemDescription properties

You can create a dataitem template like this
<DataTemplate x:Key="DataTemplate1">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="auto"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="{Binding Image}" Width="10" Height="10"/>
<TextBlock Grid.Column="1" Text="{Binding ID}"/>
<TextBlock Grid.Column="2" Text="{Binding content}"/>
</Grid>
</DataTemplate>
and then bind this data template to the list and then bind the item to the list.. :)
u can bind collection of list with class
You can create a class with three variables image,id and content so that u can make a list of that class and bind to the list

Create/Use a ListItem ItemTemplate