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>
Related
I am developing a windows store app using Universal Windows 8.1 framework. I know it's outdated but my project is suppose to be using this framework so can't help it.
Now the problem is that I have successfully made it horizontal for the desktop, but for the mobile I want it vertical, but it is still showing horizontal. I used gridview for horizontal and for phone listview but still no result.
Here is the xaml code
<Page
x:Class="MedicinesApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:MedicinesApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Page.Resources>
<CollectionViewSource x:Name="FruitsCollectionViewSource" IsSourceGrouped="True"/>
<DataTemplate x:Key="template">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
</Page.Resources>
<ListView
ItemsSource="{Binding Source={StaticResource FruitsCollectionViewSource}}"
x:Name="FruitGridView"
Padding="30,20,40,0"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="FruitGridView_ItemClick">
<ListView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Center" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding Path=DiseaseImageSource}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<StackPanel Orientation="Horizontal">
<TextBlock Text="Disease Name" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Path=DiseaseName}" Style="{StaticResource TitleTextBlockStyle}" Height="30" Margin="15,0,15,0"/>
</StackPanel>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Category of Disease" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,87,10"/>
<TextBlock Text="{Binding Path=CategoryOfDisease}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource BaseTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<TextBlock Text='{Binding Key}' Foreground="Gray" Margin="5" FontSize="30" FontFamily="Segoe UI Light" />
</DataTemplate>
</GroupStyle.HeaderTemplate>
<GroupStyle.Panel>
<ItemsPanelTemplate>
<VariableSizedWrapGrid MaximumRowsOrColumns="2" Orientation="Vertical" />
</ItemsPanelTemplate>
</GroupStyle.Panel>
</GroupStyle>
</ListView.GroupStyle>
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0" />
</ItemsPanelTemplate>
</ListView.ItemsPanel>
</ListView>
What am I missing?
Define both datatemplates in XAML resources (give them keys TemplateHori and TemplateVerti for example)
<Page.Resources>
<DataTemplate x:Key="TemplateHori">
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="TemplateVerti">
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding}"/>
<TextBlock Text="{Binding ElementName=listView, Path=DataContext.Test}" Margin="20 0" />
</StackPanel>
</DataTemplate>
</Page.Resources>
add page size changing event in constructor:
public MainPage()
{
this.InitializeComponent();
Window.Current.SizeChanged += Current_SizeChanged;
}
and in page size changing event compare with and height:
void Current_SizeChanged(object sender, Window.UI.Core.WindowSizeChangedEventArgs e)
{
var b=Window.Current.Bounds;
if (b.Width>b.Height)
{
FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateHori"];
}
else
{
FruitGridView.ItemTemplate = (DataTemplate)Resources["TemplateVerti"];
}
}
I have this xaml code on one of the windows in my app:
<phone:PanoramaItem x:Name="panoramaItemSend" Header="{Binding LocalizedResources.send, Source={StaticResource LocalizedStrings}}" >
<StackPanel Margin="12,0,0,0">
<TextBlock Text="{Binding LocalizedResources.recipientEmail, Source={StaticResource LocalizedStrings}}" />
<TextBox InputScope="EmailUserName" Text="{Binding SendModel.Email, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="100" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256" Height="105" TextWrapping="Wrap">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding LocalizedResources.amount, Source={StaticResource LocalizedStrings}}" />
<TextBox x:Name="txtSendAmount" InputScope="Number" Text="{Binding SendModel.Amount, Mode=TwoWay}" Margin="-12,0,0,0" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" TabIndex="101" MaxLength="20" TextChanged="TextBox_TextChanged" >
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding SendModel.AmountFiatStr}" Margin="0,-15,0,5" Foreground="Gainsboro"/>
<TextBlock Text="{Binding LocalizedResources.label, Source={StaticResource LocalizedStrings}}" />
<TextBox Text="{Binding SendModel.Label, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="102" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<TextBlock Text="{Binding LocalizedResources.message, Source={StaticResource LocalizedStrings}}" />
<TextBox Text="{Binding SendModel.Message, Mode=TwoWay}" Margin="-12,0,0,0" TabIndex="103" GotFocus="TextBox_GotFocus" LostFocus="TextBox_LostFocus" MaxLength="256">
<i:Interaction.Behaviors>
<prismInteractivity:UpdateTextBindingOnPropertyChanged/>
</i:Interaction.Behaviors>
</TextBox>
<Button x:Name="btnSend" Content="{Binding LocalizedResources.send, Source={StaticResource LocalizedStrings}}" Style="{StaticResource OrangeButton}" Tap="btnSend_Tap" TabIndex="104"/>
</StackPanel>
I want to create a popup when I trigger btnSend's Tap handler - btnSendTap
My popup should have this grid full of accounts that I already know how to add programatically:
<Grid Margin="15,0,0,21">
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<StackPanel x:Name="AccountsInfo" Grid.Row="0">
</StackPanel>
<StackPanel Grid.Row="1">
<local:RateChart x:Name="rateChart" Height="324" Margin="-12,25,0,0" Width="417" />
</StackPanel>
</Grid>
Have a look at the PopUp control.
Hope that is what you are looking for. :)
I'm working on C# WPF Chat application. I want it to look like Skype chat, so last added item is touching the bottom of ListBox.
Screenshot:
<ListBox Name="ListBoxMain" Grid.Column="1" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding User}" FontWeight="Bold" />
<TextBlock Text=": " FontWeight="Bold" />
<TextBlock Text="{Binding Text}" Width="225" TextWrapping="Wrap" HorizontalAlignment="Stretch" />
</WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You need to update the internal ItemsPanelTemplate of the ListBox... try this:
<ListBox Name="ListBoxMain" Grid.Column="1" Grid.Row="1">
<ListBox.ItemTemplate>
<DataTemplate>
<WrapPanel>
<TextBlock Text="{Binding User}" FontWeight="Bold" />
<TextBlock Text=": " FontWeight="Bold" />
<TextBlock Text="{Binding Text}" Width="225" TextWrapping="Wrap" HorizontalAlignment="Stretch" />
</WrapPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel VerticalAlignment="Bottom"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</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 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>