We Keep Coding

Binding using MVVM on Windows 8.1

I am developing an app on Windows 8.1 and using MVVM Light Framework.
So this is the partial XAML on one of my views.
Basically, I have a ViewModel_Queue which I contains a command that I need to call when a button is pressed inside the FlyoutMenu. My problem is, how will I be able to call this ViewModel_Queue where inside a binding ItemControl which is inside in another ItemControl which is then binded as well?
<ItemsControl Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1" ItemsSource="{Binding Person.Child}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Vertical" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Border Background="#FF808080" Width="200">
<Grid>
<TextBlock Text="{Binding Name}" FontSize="15" Foreground="White" Margin="10" VerticalAlignment="Center" FontWeight="Bold" />
</Grid>
</Border>
<ItemsControl ItemsSource="{Binding Counters}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<WrapGrid Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Grid Width="120" Background="#0F000000">
<!-- get header color -->
<Border Height="20">
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding DataContext.Queue.Command_DoSomething, ElementName=mainGrid}" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<TextBlock Text="{Binding Total}" FontSize="15" Foreground="Black" Margin="10" TextAlignment="Center" x:Name="outcomeCounterCell" Tapped="outcomeCounterCell_Tapped">
<FlyoutBase.AttachedFlyout>
<Flyout Placement="Bottom" x:Name="MenuFlyout" FlyoutPresenterStyle="{StaticResource FlyoutPresenterRoundStyle}">
<Grid Width="200">
<StackPanel>
<Border Background="#7FFF0000" CornerRadius="8,8,0,0">
<TextBlock Text="Update" TextAlignment="Center" FontSize="15" Margin="0,10" Foreground="White" />
</Border>
<TextBlock Text="{Binding Total}" TextAlignment="Center" FontSize="30" Margin="0,20,0,0" Foreground="Black" />
<StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Margin="0,20">
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="5,0,0,5" Width="50">
<TextBlock Text=" - " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Decrement}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
<Border BorderThickness="1" BorderBrush="#7F000000" CornerRadius="0,5,5,0" Width="50">
<TextBlock Text=" + " TextAlignment="Center" FontSize="20" FontWeight="Bold" Margin="0,5" />
<i:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Tapped">
<core:InvokeCommandAction Command="{Binding Command_Increment}" CommandParameter="{Binding }" />
</core:EventTriggerBehavior>
</i:Interaction.Behaviors>
</Border>
</StackPanel>
</StackPanel>
</Grid>
</Flyout>
</FlyoutBase.AttachedFlyout>
</TextBlock>
</Grid>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>

how to place a horizontal line after each item in listbox

I am building an application for Windows Phone 7 where i am displaying a few data in listbox. I want to add an image after each item to distinguish it from another. My xaml code is:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The index.jpg image is the horizontal line i wanted to add. Please help where to add that image so that i get that image as a separator for each data

Check this:
http://social.msdn.microsoft.com/Forums/vstudio/en-US/e09926c2-5d53-4337-ba76-d1c786ec9ced/listbox-with-horizontal-lineseparator?forum=wpf
1st answer
Try something like this:
<ListBox Name="listBox1" BorderThickness="0" Height="679" VerticalAlignment="Bottom" Margin="12,0,0,-29" Background="White" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<ScrollViewer HorizontalScrollBarVisibility="Disabled" Height="80" Width="400">
<StackPanel Orientation="Horizontal" Margin="0,0,0,0" Background="White" Width="500">
<Image Source="{Binding ImageBind }" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,20,10" Height="100" Width="145" />
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding city_name}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text=", " Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<TextBlock Text="{Binding state}" Foreground="Red" FontFamily="Verdana" />
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
</StackPanel>
<TextBlock Text="{Binding Path=city_description}" TextWrapping="Wrap" Foreground="Black" FontFamily="Verdana"></TextBlock>
<Separator Width="{Binding ElementName=listBox1, Path=ActualWidth}"/>
<Image Source="Image/index.jpg"/>
</StackPanel>
</StackPanel>
</ScrollViewer>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
This will help you ;)

how to wrap text in gridview - windows store app

i am using grid view control for to show data,
problem is, my few text is very long and it is not warping correctlly
xaml is like this :
<GridView x:Name="itemGridView" Grid.Row="2" Margin="30,20,0,0" AutomationProperties.AutomationId="ItemsGridView" AutomationProperties.Name="Items" TabIndex="1" Grid.RowSpan="2" ItemsSource="{Binding EquipBookingCollection}" ItemTemplate="{StaticResource Standard250x250ItemTemplate}" SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="ItemView_ItemClick"/>
and ItemTemplate is like this :
<DataTemplate x:Key="Standard250x250ItemTemplate">
<Grid HorizontalAlignment="Left">
<StackPanel Margin="5">
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Start Time : " Style="{StaticResource TitleTextStyle}"></TextBlock>
<TextBlock Text="{Binding BookedFromDteTme }" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Finish Time: " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding BookedToDteTme }" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Task Address : " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding TaskAddress}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Task Description : " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding TaskDescription}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Client Company : " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding ClientCompany}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="3,0">
<TextBlock Text="Status Name : " Style="{StaticResource TitleTextStyle}" ></TextBlock>
<TextBlock Text="{Binding Status.Description}" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0" Foreground="Red"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
please help me with this, thanks

This is a related issue to TextBlock TextWrapping not wrapping inside StackPanel
In short, you'll want to stop using StackPanel control and use the much better Grid control instead.

Set the width property of textblock
<TextBlock Text="{Binding BookedFromDteTme }" TextWrapping="Wrap" Style="{StaticResource SubtitleTextStyle}" Margin="4,0,0,0" Width = "200"/>

Instead of StackPanel you can use WrapPanel
</WrapPanel>

Text Wrapping issue in silverlight for Windows Phone

I have a twitter feed in a list box in a app I'm making for Windows Phone 7. The problem I'm having is that the text of a tweet is being cut off the edge of the list box instead of wrapping around to a new line like this:
The list box is inside a panorama which works fine. This is my code:
<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="Auto">
<!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
How can I get the tweet text to wrap round instead of being cut off? Thank you.

Since your inner StackPanel is nested within a horizontal Stackpanel, it has no constraint of depth, and so the TextBlocks expand infinitely as the text becomes longer.
There are a variety of ways you can fix the issue, but an easy one (if you know the width that you want) is to set the inner StackPanel's width to a finite number.
For example:
<ListBox x:Name="cheapyListBox" Height="500" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top" Width="400" ScrollViewer.VerticalScrollBarVisibility="Hidden" HorizontalContentAlignment="Left" >
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Height="132" Tap="Message_OnTap">
<Image Source="{Binding ImageSource}" Height="73" Width="73" VerticalAlignment="Top" Margin="0,10,8,0"/>
<StackPanel Width="400">
<!--<TextBlock Text="{Binding UserName}" FontSize="28" Margin="12,0,0,0" /> -->
<TextBlock Text="{Binding Message}" TextWrapping="Wrap" FontSize="24" />
<TextBlock Text="{Binding Date}" TextWrapping="Wrap" FontSize="20" />
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Hope this helps!

Populate two column grid with databinding?

How do i populate a two column grid with objects from my observable collection?
I've tried to achieve this effect by using the tookits wrap panel but the items just stack.
<toolkit:WrapPanel Margin="5,0,0,0" Width="400">
<ItemsControl ItemsSource="{Binding Trips}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Height="236" Width="182">
<Button Style="{StaticResource VasttrafikButtonTrip}">
<StackPanel Width="152" Height="140">
<TextBlock Text="{Binding FromName}" />
<TextBlock FontFamily="Segoe WP Semibold" Text="till" />
<TextBlock Text="{Binding ToName}" />
</StackPanel>
</Button>
<TextBlock HorizontalAlignment="Left" Width="160" FontSize="16" FontWeight="ExtraBlack" Text="{Binding TravelTimeText}" />
<TextBlock HorizontalAlignment="Left" Width="160" Margin="0,-6,0,0" FontSize="16" Text="{Binding TransferCountText}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</toolkit:WrapPanel>

The only child for the WrapPanel will be the ItemsControl so the stacking is done by the internal ItemsPanel in the ItemsControl which, by default, is a StackPanel with Vertical Orientation. So to get "two columns", try to move the WrapPanel into the ItemsControl.ItemsPanel instead like this
<ItemsControl ItemsSource="{Binding Trips}">
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<toolkit:WrapPanel Margin="5,0,0,0" Width="400"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<StackPanel Height="236" Width="182">
<Button Style="{StaticResource VasttrafikButtonTrip}">
<StackPanel Width="152" Height="140">
<TextBlock Text="{Binding FromName}" />
<TextBlock FontFamily="Segoe WP Semibold" Text="till" />
<TextBlock Text="{Binding ToName}" />
</StackPanel>
</Button>
<TextBlock HorizontalAlignment="Left" Width="160" FontSize="16" FontWeight="ExtraBlack" Text="{Binding TravelTimeText}" />
<TextBlock HorizontalAlignment="Left" Width="160" Margin="0,-6,0,0" FontSize="16" Text="{Binding TransferCountText}" />
</StackPanel>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>