I am developing Windows phone 8.1 RT app. I am using Combobox. There are more than 20 Operators to be bind to the Combbox. when we tab on the Combobox, App should open the all 20 opetaros in full mode. I need two different templates, should use one template (image and textblock) when items opens in Full mode and other template (only TextBlock) when a item selected among full mode items. DataTemplateSelector is inherited and created new DataTemplateSelector. ItemTemplateSelector is assigned with newly inherited DataTemplateSelector. Below the is code used.
<ComboBox Grid.Row="3" Grid.Column="0" Margin="15 5 0 0"
ItemsSource="{Binding Operators}" SelectedItem="{Binding SelectedOperator, Mode=TwoWay}"
Style="{StaticResource FullModeComboBoxStyle1}" ItemContainerStyle="{StaticResource FullModeComboBoxItemStyle1}"
VerticalAlignment="Top"
Height="65"
ItemTemplateSelector="{StaticResource ExploreTemplateSelector}"
/>
TemplateSelector
public class ExploreTemplateSelector : DataTemplateSelector
{
public DataTemplate DropdownItemsTemplate { get; set; }
public DataTemplate SelectedItemTemplate { get; set; }
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
var parent = container;
while (parent != null && !(parent is ComboBoxItem) && !(parent is ComboBox))
parent = VisualTreeHelper.GetParent(parent);
var inDropDown = (parent is ComboBoxItem);
return inDropDown
? DropdownItemsTemplate
: SelectedItemTemplate;
}
}
DataTemplate
<DataTemplate x:Key="OperatorDataTemplate">
<StackPanel Orientation="Horizontal" Margin="5 5 0 0" Height="Auto">
<Image Source="{Binding ImageUri}" Height="35" Width="60" VerticalAlignment="Top" />
<TextBlock Text="{Binding Name}" Style="{StaticResource ComboboxTextBlockStyle}" Margin="5 0 0 0" Width="120" VerticalAlignment="Top" TextWrapping="Wrap"/>
</StackPanel>
</DataTemplate>
<DataTemplate x:Key="SelectedOperatorDataTemplate">
<TextBlock Text="{Binding Name}" Style="{StaticResource ComboboxTextBlockStyle}" Margin="5 0 0 0" Width="120" VerticalAlignment="Top" TextWrapping="Wrap"/>
</DataTemplate>
<class:ExploreTemplateSelector x:Key="ExploreTemplateSelector" DropdownItemsTemplate="{StaticResource SelectedOperatorDataTemplate}"
SelectedItemTemplate="{StaticResource SelectedOperatorDataTemplate}"
/>
Items are not binding when we tab the Combobox, showing list of namespace. But selecting a item in full mode, SelectTemplateCore is hitted and Selected item is showed using SelectedItemTemplate. But SelectTemplateCore is not hitted when binding Datasource.
What is the problem in this code? Why DropDownItemsTemplate is not used to bind the items?
Thanks in advance
Because when you are specifying the template selector in the xaml, the properties are initialised with the same datatemplate "SelectedOperatorDataTemplate"
Related
How to pass CommandParameter on holed item?
my xaml code
<ListView Grid.Row="1" Name="ProfilesListView" SelectedItem="{Binding SelectedUser,Mode=TwoWay}" ItemsSource="{Binding Path=ViewAllProfile,Mode=TwoWay}">
<ListView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal" HorizontalAlignment="Center">
</ItemsWrapGrid>
</ItemsPanelTemplate>
</ListView.ItemsPanel>
<I:Interaction.Behaviors>
<core:EventTriggerBehavior EventName="Holding">
<core:InvokeCommandAction Command="{Binding Path=HoldingCommand}" CommandParameter="{Binding ElementName=ProfilesListView,Path=SelectedItem}" ></core:InvokeCommandAction>
</core:EventTriggerBehavior>
</I:Interaction.Behaviors>
<ListView.ItemTemplate>
<DataTemplate>
<StackPanel Margin="10,0,0,0">
<Image Margin="10" Source="{Binding ImageURL}" Width="150" Height="150" >
</Image>
<TextBlock x:Name="userName" Text="{Binding MenuName}" Foreground="White" HorizontalAlignment="Center"></TextBlock>
</StackPanel>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
my viewmodel is .i am not getting the holding item details .how to solve this
_HoldingCommand = new RelayCommand<object>(HoldedUser);
Not sure this can be done directly through MVVM binding.
The holding event won't set the selected item straight away...
If you would register to the holding event and use code behind, you'll notice the 'holded' item is only known in the HoldingRoutedEventArgs - something like this:
private async void OnListViewHolding(object sender, HoldingRoutedEventArgs e)
{
var selectedItemThroughHolding = e.OriginalSource.DataContext as ***Model;
}
So my suggestion would be to use this code behind event and reroute the selectedItem to the viewmodel there...
I create a windows phone 8 application. I have a remote MySql server and I want fetch data from it and display it in my windows phone 8 application in listview. How can I do this ?
Here is sample code of my listview
<ListBox Grid.Row="1" Width="450">
<ListBox.Items>
<ListBoxItem Margin="0,0,0,10" >
<ListBoxItem.Background>
<SolidColorBrush Color="#FF421212" Opacity="0.6"/>
</ListBoxItem.Background>
<StackPanel Orientation="Horizontal" Width="453">
<Image Source="images/news.png" Width="92"></Image>
<StackPanel Orientation="Vertical" Width="353">
<TextBlock VerticalAlignment="Top" Text="News" Margin="10,0,0,0" FontSize="30" Height="52"/>
<TextBlock Text="Breaking news update" VerticalAlignment="Bottom" Width="331" Height="42" HorizontalAlignment="Left" Margin="12,0,0,0"/>
</StackPanel>
</StackPanel>
</ListBoxItem>
</ListBox.Items>
</ListBox>
XAML:
<ListBox x:Name="LstNews" Grid.Row="1" Width="450">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal" Width="453" Background="#FF421212" Opacity="0.6">
<Image Source="{Binding Img_Path}" Width="92"></Image>
<StackPanel Orientation="Vertical" Width="353">
<TextBlock VerticalAlignment="Top" Text="{Binding NewsHeader}" Margin="10,0,0,0" FontSize="30" Height="52"/>
<TextBlock Text="{Binding NewsUpdate}" VerticalAlignment="Bottom" Width="331" Height="42" HorizontalAlignment="Left" Margin="12,0,0,0"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
cs:
public void LoadSampleData()
{
ObservableCollection<NewsData> obj = new ObservableCollection<NewsData>();
obj.Add(new NewsData("Your Image Path", "Sample Header", "Sample Update"));
obj.Add(new NewsData("Your Image Path1", "Sample Header1", "Sample Update1"));
obj.Add(new NewsData("Your Image Path2", "Sample Header2", "Sample Update2"));
LstNews.ItemsSource = obj;
}
public class NewsData
{
public string Img_Path { get; set; }
public string NewsHeader { get; set; }
public string NewsUpdate { get; set; }
public NewsData() { }
public NewsData(string Img_Path,string NewsHeader,string NewsUpdate)
{
this.Img_Path = Img_Path;
this.NewsHeader = NewsHeader;
this.NewsUpdate = NewsUpdate;
}
}
I don't think its a good idea to let you app communicate with the database directly. Why not build a service which will serve data to your application directly. This has the following advantages :
Your app can be ignorant of how the database is implemented. It would be served Json/Xml data based on how you design the service.
You can reuse the service for any other apps in the future.
You can build the service using any of the widely popular frameworks available (.NET, PHP, Java, just to name a few).
I want to open a ListPicker in Fullscreen mode on ApplicationBarButton click. The ListPicker should be opened as new popup and should not be visible in the page.
This was my try:
private void OnAppBarButtonClick(object sender, EventArgs e)
{
ListPicker listPicker = new ListPicker();
listPicker.ExpansionMode = ExpansionMode.FullScreenOnly;
this.ContentPanel.Children.Add(listPicker);
ListPickerItem item1 = new ListPickerItem() { Content = "Item1" };
ListPickerItem item2 = new ListPickerItem() { Content = "Item2" };
ListPickerItem item3 = new ListPickerItem() { Content = "Item3" };
listPicker.Items.Add(item1);
listPicker.Items.Add(item2);
listPicker.Items.Add(item3);
listPicker.Open();
}
You can accomplish this by defining the ListPicker in your xaml, setting the ExpansionMode to FullScreenOnly and making it Collapsed.
<Grid x:Name="Content"/>
<!-- other controls -->
<toolkit:ListPicker x:Name="Picker" ExpansionMode="FullScreenOnly"
Visibility="Collapsed"
FullModeHeader="SELECT"
ItemsSource="{Binding MyItems}"
SelectionChanged="OnPickerSelectionChanged">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Margin="0,20" Text="{Binding Name}"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
</Grid>
Then in your code, you open the picker.
Picker.Open();
This samples assumes you have a DataContext with a MyItems property that is a collection of items that has a Name property.
this code works for me without the need of any base code,
<toolkit:ListPicker Header="State"
x:Name="State"
ExpansionMode="FullScreenOnly">
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate>
<TextBlock Text="{Binding}"
Margin="0 24 24 24"
TextWrapping="Wrap"
Style="{StaticResource PhoneTextTitle2Style}" />
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Just initialize State.ItemsSource with a list.
How to change the content of toolkit pushpin via program dynamically?
I've put several pushpins on the maps on the initializing, and I want to change the content of the pushpin while user put a tap on it.
This is my xaml code:
<toolkit:MapExtensions.Children>
<toolkit:MapItemsControl x:Name="MapItems">
<toolkit:MapItemsControl.ItemTemplate>
<DataTemplate>
<toolkit:Pushpin GeoCoordinate="{Binding Coordinate}" Tap="PinOnTap">
<toolkit:Pushpin.Template>
<ControlTemplate TargetType="toolkit:Pushpin">
<StackPanel>
<ContentPresenter x:Name="content" HorizontalAlignment="Center" Content="{TemplateBinding Content}" />
<Path Data="M0,0 L0,1 L1,0" Fill="{TemplateBinding Background}" Stretch="Fill" Margin="32,0" Height="12" Width="18"
Visibility="{Binding Content.Visibility, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}"
HorizontalAlignment="Left" />
<Image Source="{Binding Icon_img}" Stretch="None" HorizontalAlignment="Left"/>
</StackPanel>
</ControlTemplate>
</toolkit:Pushpin.Template>
<Border Background="White" Visibility="Collapsed" Width="200" HorizontalAlignment="Center" >
<StackPanel Orientation="Horizontal" Tap="gotoProfileFromPin">
<Image Margin="8" Source="{Binding Image}" VerticalAlignment="Top" Width="50" Height="50" />
<StackPanel>
<TextBlock Text="{Binding Uid}" Visibility="Collapsed"/>
</StackPanel>
</StackPanel>
</Border>
</toolkit:Pushpin>
</DataTemplate>
</toolkit:MapItemsControl.ItemTemplate>
</toolkit:MapItemsControl>
</toolkit:MapExtensions.Children>
And my program.cs:
private void PinOnTap(object sender, System.Windows.Input.GestureEventArgs e)
{
var popOut = ((sender as Pushpin).Content) as Border;
popOut.Visibility = System.Windows.Visibility.Visible;
var popOutImg = (popOutNew.Child as StackPanel).DataContext;
var popUser = popOutImg as UserPin;
// function to get the images by Uid
popUser.Image = new Uri(images fetch from function, UriKind.RelativeOrAbsolute);
popOutNew.Child.UpdateLayout();
e.Handled = true;
}
In PinOnTap function, I'll fetch a picture from another function and show it on the maps as toolkit:Pushpin.Content, However it can't work.
This code:
popUser.Image = new Uri(images fetch from function, UriKind.RelativeOrAbsolute);
it only change the Image source but not update the UI.
I print it's value and it source has been changed, but I donno why it didn't appear on the map (the map only show the "Border" with white background and didn't have any image inside it)
I think You will have to Implement INotifyPropertyChange as th change is not reflected on Xaml .
In toolkit LongListSelector, there used to be a property IsFlatList which needed to be set to true to display flat list without any grouping. But in the LongListSelector provided in phone control, this property is missing. Here is what I am doing
<phone:LongListSelector Name="myList" IsGroupingEnabled="False" LayoutMode="List" ItemsSource="{Binding Source ={StaticResource SortedList} }" CacheMode="BitmapCache" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<components:MyControl CacheMode="BitmapCache" MyItem="{Binding}"/>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
If I change the control to ListBox and remove LongListSelector specific property then it display my list.
Can someone please tell me what I am missing?
I am following this(Remarks) documentation of LongListSelector
In the Windows Phone 8 Version of the LongListSelector setting LayoutMode to List and IsGroupingEnabled to false should display your databound data as a flat list like in the WP7 Toolkit version of the control.
For example,
Given an Entity class
public class Entity
{
public string Name
{
get;
set;
}
public string Info
{
get;
set;
}
public int ID
{
get;
set;
}
}
All I need to do is create an ObservableCollection of Entity on my page and bind it to the itemsource of my LongListSelector (named list).
ObservableCollection<Entity> data = new ObservableCollection<Entity>();
list.ItemsSourdce = data;
Then I create the entities and add them to the collection.
Here is the XAML for my LongListSelector:
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<phone:LongListSelector Name="list" HorizontalAlignment="Left" Height="609" VerticalAlignment="Top" Width="456" LayoutMode="List" IsGroupingEnabled="False" >
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel VerticalAlignment="Top">
<TextBlock FontWeight="Bold" Text="{Binding Name}" />
<TextBlock Text="{Binding Info}" />
</StackPanel>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
</Grid>
LayoutMode ="List" that's all you need.