I have TreeView with binded collection. How can I get object from TreeViewItem Context Flyout with Button in this Flyout by Click event? Can't use selected item because right clicking don't set item as selected. Thanks, I'm new with WinUI 3. Here's my code:
<DataTemplate x:Key="TreeViewPalleteItemTemplate" x:DataType="local:PalleteItem">
<TreeViewItem>
<TreeViewItem.ContextFlyout>
<Flyout Placement="BottomEdgeAlignedLeft">
<StackPanel Orientation="Horizontal">
<Button Width="60" Height="60" Click="DeletePalleteItem_Click">
<SymbolIcon Symbol="Delete"/>
</Button>
<Button Width="60" Height="60">
<SymbolIcon Symbol="Setting"/>
</Button>
</StackPanel>
</Flyout>
</TreeViewItem.ContextFlyout>
<StackPanel Orientation="Vertical">
<StackPanel Orientation="Horizontal">
<Image Source="Graphics/part.png" Margin="0,0,5,0" Stretch="Uniform" MaxHeight="20"/>
<TextBlock Text="{Binding Item.DrawingNumber}" FontSize="18" />
<TextBlock Text=" - " FontSize="18" />
<TextBlock Text="{Binding Item.DrawingName}" FontSize="18" />
</StackPanel>
<StackPanel Orientation="Horizontal" Margin="30,0,0,0">
<TextBlock Text="{Binding EmployeeName}" FontSize="16"/>
<TextBlock Text=" - (" FontSize="16"/>
<TextBlock Text="{Binding CountString}" FontSize="16"/>
<TextBlock Text=")" FontSize="16"/>
</StackPanel>
</StackPanel>
</TreeViewItem>
</DataTemplate>
private void DeletePalleteItem_Click(object sender, RoutedEventArgs e)
{
here get clicked object (PalleteItem).....
}
OK. finally I get solution by adding RightTapped event and set TreeViewItem as selected. But is there another (better) solution to get object ?
private void TreeViewItem_RightTapped(object sender, RightTappedRoutedEventArgs e)
{
if (sender is TreeViewItem item)
{
item.IsSelected = true;
}
}
This is another option:
<Grid>
<TreeView
x:Name="TreeViewControl"
ItemsSource="{x:Bind Items}">
<TreeView.ItemTemplate>
<DataTemplate x:DataType="local:Item">
<TreeViewItem Content="{x:Bind Id}">
<TreeViewItem.ContextFlyout>
<Flyout>
<Button
Click="Button_Click"
Content="Click" />
</Flyout>
</TreeViewItem.ContextFlyout>
</TreeViewItem>
</DataTemplate>
</TreeView.ItemTemplate>
</TreeView>
</Grid>
public class Item
{
public string Id { get; set; } = string.Empty;
}
public sealed partial class MainWindow : Window
{
public MainWindow()
{
this.InitializeComponent();
}
public ObservableCollection<Item> Items { get; } = new()
{
new Item() { Id = "A" },
new Item() { Id = "B" },
new Item() { Id = "C" },
};
private void Button_Click(object sender, RoutedEventArgs e)
{
if (sender is Button button &&
button.DataContext is Item item)
{
// Do something here...
}
}
}
Related
I have a list where can be one or more than grid. I am trying to use collectionview for this. But when I change grid, view of some collectionview items are broken (on iOS app). As in gif:
But when I swipe scroll, broken grids are getting better. My project is custom project. That's why I can't share sample app. But collectionview implementation is as follows:
<RefreshView Command="{Binding RefreshCommand}"
IsRefreshing="{Binding IsRefreshing}">
<CollectionView x:Name="FlowListFileFolder"
AutomationId="FileSystemPage_MainScreenListView"
IsGrouped="true"
ItemsSource="{Binding FlowListCloudItem}"
ItemsLayout="{Binding CollectionViewItemsLayout}">
<CollectionView.GroupHeaderTemplate>
<DataTemplate>
<StackLayout Style="{DynamicResource FlowListGroupTitleWrapperStyle}">
<Label Text="{Binding Path=Key}"
Style="{DynamicResource FlowListGroupTitleStyle}" />
</StackLayout>
</DataTemplate>
</CollectionView.GroupHeaderTemplate>
<CollectionView.ItemTemplate>
<DataTemplate>
<local:ItemGridView LongPressEvent="Handle_LongPressEvent" SingleTapEvent="Handle_TappedEvent">
<local:CustomFolderFrame Style="{DynamicResource FspCiFrameWrapperStyle}" BorderColor="{Binding FrameColor}">
<StackLayout Orientation="Vertical" Spacing="0" BackgroundColor="{Binding FrameColor}" Margin="1">
<Grid Style="{Binding FspCi_GridStyle}">
<StackLayout AutomationId="FileSystemPage_FolderStackLayout"
Style="{DynamicResource FspCiGeneralWrapperLayoutStyle}">
<StackLayout Style="{Binding FspCiThumbnailImageAndInformation_GeneralWrapperLayoutStyle}">
<StackLayout Style="{Binding FspCiThumbnailImage_WrapperLayoutStyle}">
<ff:CachedImage AutomationId="{Binding LvItemThumbnailSource, StringFormat='FolderIcon_{0}'}"
Style="{Binding FspCiFolderThumbnailImageStyle}" />
<ff:CachedImage Style="{Binding FspCiFileThumbnailImageStyle}" />
</StackLayout>
<StackLayout Style="{Binding FspCiCloudItemInformation_WrapperLayoutStyle}">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" Spacing="5">
<Label AutomationId="FileSystemPage_lblDisplayNameFolder"
Text="{Binding DisplayName}"
Style="{DynamicResource FspCiDisplayNameStyle}" />
<ff:CachedImage Source="group.png" Style="{Binding FspCiGroupIcon_ImageStyle}" />
</StackLayout>
<Label Text="{Binding CreationDate}"
Style="{DynamicResource FspCiCreationDateStyle}" />
</StackLayout>
</StackLayout>
</StackLayout>
<StackLayout Style="{Binding FspCiCheckUncheckMoreDetail_WrapperLayoutStyle}">
<StackLayout Style="{Binding FspCiCheck_StackLayoutStyle}">
<ff:CachedImage AutomationId="{Binding DisplayName, StringFormat='FileSystemPage_{0}_checked'}"
Source="checked.png"
Style="{Binding FspCiCheckUncheck_ImageStyle}" />
</StackLayout>
<StackLayout Style="{Binding FspCiUncheck_StackLayoutStyle}">
<ff:CachedImage AutomationId="{Binding DisplayName, StringFormat='FileSystemPage_{0}_unchecked'}"
Source="unchecked.png"
Style="{Binding FspCiCheckUncheck_ImageStyle}" />
</StackLayout>
<StackLayout Style="{Binding FspCiMoreDetail_StackLayoutStyle}">
<ff:CachedImage AutomationId="FileSystemPage_ItemMoreDetail"
Source="ic_dots_gray.png"
Style="{Binding FspCiCheckUncheck_ImageStyle}"/>
<StackLayout.GestureRecognizers>
<TapGestureRecognizer Tapped="ItemMoreDetail_Clicked" />
</StackLayout.GestureRecognizers>
</StackLayout>
</StackLayout>
</Grid>
</StackLayout>
</local:CustomFolderFrame>
</local:ItemGridView>
</DataTemplate>
</CollectionView.ItemTemplate>
<CollectionView.Footer>
<StackLayout Style="{DynamicResource FspCiFooterWrapperLayoutStyle}">
<Label Text="{Binding LabelFolderCount}"
Style="{DynamicResource FspCiFooterFileFolderCountStyle}" />
<Label Text="{Binding LabelFileCount}"
Style="{DynamicResource FspCiFooterFileFolderCountStyle}" />
</StackLayout>
</CollectionView.Footer>
</CollectionView>
</RefreshView>
For supporting different screens with one project, I had used different styles that changes according to device's viewport information. When app open, I gets device's viewport information and I set style that is suitable viewport. These styles gets from there.
And when I click grid button, I change some of these styles as follow:
public class FileSystemViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected virtual void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
protected void SetValue<T>(ref T backingField, T value, [CallerMemberName] string propertyName = null)
{
if (EqualityComparer<T>.Default.Equals(backingField, value))
return;
backingField = value;
OnPropertyChanged(propertyName);
}
private ItemsLayout collectionViewItemsLayout;
public ItemsLayout CollectionViewItemsLayout { get => collectionViewItemsLayout; set { SetValue(ref collectionViewItemsLayout, value); } }
public Command GridClicked()
{
var btnGrid_Clicked = new Command(
async () => {
if (FlowListGridCount == 1)
{
UpdateMultipleGrid();
}
else
{
UpdateOneGrid();
}
});
return btnGrid_Clicked;
}
public void UpdateMultipleGrid()
{
foreach (var item in CloudItemList[0])
{
SetFolderTwoGridView(item);
}
foreach (var item in CloudItemList[1])
{
SetFileTwoGridView(item);
}
Helpers.Settings.FlowColumnCount = FlowListGridCount = ElementResolutionsHelper.GetPageFolderColumnCount(); //GetPageFolderColumnCount returns column count that is suitable with screen
CollectionViewItemsLayout = new GridItemsLayout(FlowListGridCount, ItemsLayoutOrientation.Vertical);
}
public void UpdateOneGrid()
{
foreach (var item in CloudItemList[0])
{
SetFolderOneGridView(item);
}
foreach (var item in CloudItemList[1])
{
SetFileOneGridView(item);
}
Helpers.Settings.FlowColumnCount = FlowListGridCount = ElementResolutionsHelper.GetPageFolderColumnCount(); //GetPageFolderColumnCount returns 1 for this situation
CollectionViewItemsLayout = new GridItemsLayout(FlowListGridCount, ItemsLayoutOrientation.Vertical);
}
private void SetFolderTwoGridView(CloudItemViewingResponse item)
{
if (item.IsShared)
item.LvItemThumbnailSource = "folder_share.png";
else
item.LvItemThumbnailSource = "ic_folder.png";
item.FspCiCheck_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridCheck_StackLayoutStyle"]);
item.FspCiUncheck_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridUncheck_StackLayoutStyle"]);
item.FspCiMoreDetail_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridMoreDetail_StackLayoutStyle"]);
item.FspCiCheckUncheck_ImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridCheckUncheckMoreDetail_ImageStyle"]);
item.FspCiCheckUncheckMoreDetail_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridCheckUncheckMoreDetail_WrapperLayoutStyle"]);
item.FspCiCloudItemInformation_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridCloudItemInformation_WrapperLayoutStyle"]);
item.FspCiThumbnailImage_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridFolderThumbnailImage_WrapperLayoutStyle"]);
item.FspCiFolderThumbnailImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridFolderThumbnailImageStyle"]);
item.FspCiFileThumbnailImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridFileThumbnailImageStyle"]);
item.FspCiThumbnailImageAndInformation_GeneralWrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridThumbnailImageAndInformation_GeneralWrapperLayoutStyle"]);
item.FspCi_GridStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridFolder_GridStyle"]);
}
private void SetFileTwoGridView(CloudItemViewingResponse item)
{
item.FspCiCheck_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridCheck_StackLayoutStyle"]);
item.FspCiUncheck_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridUncheck_StackLayoutStyle"]);
item.FspCiMoreDetail_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridMoreDetail_StackLayoutStyle"]);
item.FspCiCheckUncheck_ImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridCheckUncheckMoreDetail_ImageStyle"]);
item.FspCiCheckUncheckMoreDetail_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridCheckUncheckMoreDetail_WrapperLayoutStyle"]);
item.FspCiCloudItemInformation_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridCloudItemInformation_WrapperLayoutStyle"]);
item.FspCiThumbnailImage_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridFileThumbnailImage_WrapperLayoutStyle"]);
item.FspCiFolderThumbnailImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridFolderThumbnailImageStyle"]);
item.FspCiFileThumbnailImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridFileThumbnailImageStyle"]);
item.FspCiThumbnailImageAndInformation_GeneralWrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridThumbnailImageAndInformation_GeneralWrapperLayoutStyle"]);
item.FspCi_GridStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiMultipleGridFile_GridStyle"]);
}
private void SetFolderOneGridView(CloudItemViewingResponse item)
{
if (item.IsShared)
item.LvItemThumbnailSource = "folder_share.png";
else
item.LvItemThumbnailSource = "ic_folder.png";
item.FspCiCheck_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridCheck_StackLayoutStyle"]);
item.FspCiUncheck_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridUncheck_StackLayoutStyle"]);
item.FspCiMoreDetail_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridMoreDetail_StackLayoutStyle"]);
item.FspCiCheckUncheck_ImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridCheckUncheckMoreDetail_ImageStyle"]);
item.FspCiCheckUncheckMoreDetail_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridCheckUncheckMoreDetail_WrapperLayoutStyle"]);
item.FspCiCloudItemInformation_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridCloudItemInformation_WrapperLayoutStyle"]);
item.FspCiThumbnailImage_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridThumbnailImage_WrapperLayoutStyle"]);
item.FspCiFolderThumbnailImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridFolderThumbnailImageStyle"]);
item.FspCiFileThumbnailImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridFileThumbnailImageStyle"]);
item.FspCiThumbnailImageAndInformation_GeneralWrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridThumbnailImageAndInformation_GeneralWrapperLayoutStyle"]);
item.FspCi_GridStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGrid_GridStyle"]);
}
private void SetFileOneGridView(CloudItemViewingResponse item)
{
item.FspCiCheck_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridCheck_StackLayoutStyle"]);
item.FspCiUncheck_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridUncheck_StackLayoutStyle"]);
item.FspCiMoreDetail_StackLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridMoreDetail_StackLayoutStyle"]);
item.FspCiCheckUncheck_ImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridCheckUncheckMoreDetail_ImageStyle"]);
item.FspCiCheckUncheckMoreDetail_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridCheckUncheckMoreDetail_WrapperLayoutStyle"]);
item.FspCiCloudItemInformation_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridCloudItemInformation_WrapperLayoutStyle"]);
item.FspCiThumbnailImage_WrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridThumbnailImage_WrapperLayoutStyle"]);
item.FspCiFolderThumbnailImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridFolderThumbnailImageStyle"]);
item.FspCiFileThumbnailImageStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridFileThumbnailImageStyle"]);
item.FspCiThumbnailImageAndInformation_GeneralWrapperLayoutStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGridThumbnailImageAndInformation_GeneralWrapperLayoutStyle"]);
item.FspCi_GridStyle = (Style)((Application.Current.Resources.MergedDictionaries).ElementAt((int)EStyleItem.DevicesStyle)["FspCiOneGrid_GridStyle"]);
}
}
We would change the HasUnevenRows or CachingStrategy value for the listview in case of such broken. Does collectionview have something like this?
And collectionview grid doesn't broken on Android. But when I change grid, it turns back at the top of the list. If I swipe to bottom, I don't want to turn back to top when I change grid.
Thank you in advance.
In my xamarin.forms app, I have a listview with checkboxes for the selection of the individual cell. What I am trying to do is multi select the checkboxes inside the listview by providing a "select all" checkbox outside the listview.The Multiselection works fine. For the "select all" checkbox click and individual checkbox click, I am performing some actions like an API Call. The Problem I am facing is Whenever I Click on the "select all" checkbox, the checkbox changed event of individual checkbox gets triggered.I know its natural But is there any way to prevent it like subscribe or unsubscribe the changed event of individual checkbox or something?
Xaml
<Grid >
<Grid.RowDefinitions>
<RowDefinitions Height="Auto"/>
<RowDefinitions Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal">
<Label Text="Select All" FontSize="Micro" TextColor="LawnGreen" HorizontalOptions="Start" VerticalOptions="Center" >
</Label>
<CheckBox x:Name="MultiselectCheckbox" ScaleX="0.8" ScaleY="0.8" CheckedChanged="MultiSelectCheckBox_CheckedChanged" IsChecked="False" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Color="LawnGreen"></CheckBox>
</StackLayout>
<ListView
x:Name="Listview"
HorizontalOptions="FillAndExpand"
ItemTapped="DistrictList_ItemTapped"
VerticalOptions="FillAndExpand" >
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell >
<ViewCell.View>
<Frame HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding name}" FontSize="Micro" HorizontalOptions="StartAndExpand" VerticalOptions="Center" TextColor="Snow" Margin="5,0,0,0">
</Label>
<CheckBox CheckedChanged="Single_CheckedChanged" IsChecked="{Binding Selected}" Color="LightBlue" HorizontalOptions="End" >
</CheckBox>
</StackLayout>
</Frame>
</ViewCell.View>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
Multiselect Checkbox checked event
private void MultiSelectCheckBox_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
if (!e.Value)
{
foreach (MyData TS in MyObject)
{
TS.Selected = false;
}
}
else{
foreach (MyData TS in MyObject)
{
TS.Selected = true;
}
PerformSomeAction();
}
}
Single selection Checkbox changed event
private void Single_CheckedChanged(object sender, CheckedChangedEventArgs e)
{
if (!e.Value)
{
}
else{
PerformSomeAction();
}
}
Data Model
public class MyData : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
public string name { get; set; }
private bool selected;
public bool Selected
{
get
{
return selected;
}
set
{
if (value != null)
{
selected = value;
NotifyPropertyChanged("Selected");
}
}
}
}
Agree with # Nikhileshwar , you could define some properties to get the different condition .And since you had used MVVM, you would better put all logic handling in your viewmodel .
in xaml
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackLayout Grid.Row="0" Orientation="Horizontal" HeightRequest="40" BackgroundColor="LightPink">
<Label Text="Select All" FontSize="Micro" TextColor="Red" HorizontalOptions="Start" VerticalOptions="Center" >
</Label>
<CheckBox x:Name="MultiselectCheckbox" ScaleX="0.8" ScaleY="0.8" IsChecked="{Binding MultiselectCheck}" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" Color="Red"></CheckBox>
</StackLayout>
<ListView Grid.Row="1"
x:Name="Listview"
HorizontalOptions="FillAndExpand"
ItemsSource="{Binding MyItems}"
VerticalOptions="FillAndExpand" >
<ListView.ItemTemplate >
<DataTemplate >
<ViewCell >
<Frame Padding="0" HeightRequest="40" HorizontalOptions="FillAndExpand">
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand">
<Label Text="{Binding name}" FontSize="Micro" HorizontalOptions="StartAndExpand" VerticalOptions="Center" TextColor="Red" Margin="5,0,0,0">
</Label>
<CheckBox IsChecked="{Binding Selected}" Color="Red" HorizontalOptions="End" >
</CheckBox>
</StackLayout>
</Frame>
</ViewCell>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
</Grid>
in ViewModel
public class MyViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyPropertyChanged([CallerMemberName] String propertyName = "")
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
bool isMultiselect;
bool isSingleSelect;
public ObservableCollection<MyData> MyItems { get; set; }
private bool multiselectCheck;
public bool MultiselectCheck
{
get
{
return multiselectCheck;
}
set
{
if (multiselectCheck != value)
{
multiselectCheck = value;
if(!isSingleSelect)
{
isMultiselect = true;
foreach (MyData data in MyItems)
{
data.Selected = value;
}
isMultiselect = false;
}
NotifyPropertyChanged("MultiselectCheck");
}
}
}
public MyViewModel()
{
MyItems = new ObservableCollection<MyData>() {
new MyData(){name="Selection1" },
new MyData(){name="Selection2" },
new MyData(){name="Selection3" },
};
foreach(MyData data in MyItems)
{
data.PropertyChanged += Data_PropertyChanged;
}
}
I have to insert elements to a itemscontrol at top of the list. While inserting an element to the list at 0th position, list is scrolling to that item. But i don't want to scroll the item to the top of the list, when an element is inserted. Any ideas for making this possible.
Code of xaml :
<Grid x:Name="LayoutRoot" Background="Transparent">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!--TitlePanel contains the name of the application and page title-->
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock x:Name="ApplicationTitle" Text="MY APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/>
<TextBlock x:Name="PageTitle" Text="page name" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
<Button Height="72" Content="Add More" Click="Button_Click"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<ScrollViewer x:Name="MainScrollViewer" Grid.Row="1" Margin="12,0,12,0" >
<Grid x:Name="ContentPanel" >
<ItemsControl x:Name="MainItemsControl" ItemsSource="{Binding}">
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBlock Margin="10" Text="{Binding Item}" FontSize="28" />
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</Grid>
</ScrollViewer>
</Grid>
My class Code:
public partial class MainPage : PhoneApplicationPage
{
private ObservableCollection<Model> mainList;
public ObservableCollection<Model> MainList
{
get { return mainList; }
set
{
mainList = value;
}
}
public MainPage()
{
InitializeComponent();
}
private void PhoneApplicationPage_Loaded(object sender, RoutedEventArgs e)
{
MainList = new ObservableCollection<Model>();
AddItems(15);
ContentPanel.DataContext = MainList;
}
void AddItems(int numberIfItemsToAdd)
{
Debug.WriteLine("AddItems()");
int start = MainList.Count;
int end = start + numberIfItemsToAdd;
for (int i = start; i < end; i++)
{
Model model = new Model();
model.Item="Item" + i;
MainList.Insert(0, model);
}
}
private void Button_Click(object sender, RoutedEventArgs e)
{
AddItems(1);
}
}
Thank you in advance.
I think the question says it all: I want to build an Windows 8 Store app but how can I build an UI like this:
I think left is a normal ListView. The important thing is that I want an own AppBar for each ListViewEntry. And how can I load different pages (with different AppBars) in the right content area?
You can put a ContentControl in the main panel and another one in the AppBar, then bind their Content properties to the SelectedItem property of the ListBox on the left and use ContentTemplateSelector to display the right UI for the selected page.
*EDIT - Sample
XAML
<Page
x:Class="App17.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App17"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<local:PropertyPageTemplateSelector
x:Key="PropertyPageTemplateSelector"/>
</Page.Resources>
<Grid
Background="LemonChiffon">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition
Width="2*" />
</Grid.ColumnDefinitions>
<ListBox
x:Name="listBox"
DisplayMemberPath="Label"/>
<ContentControl
Grid.Column="1"
Content="{Binding SelectedItem, ElementName=listBox}"
ContentTemplateSelector="{StaticResource PropertyPageTemplateSelector}">
<ContentControl.Resources>
<DataTemplate
x:Key="Options">
<StackPanel>
<TextBlock
Text="{Binding Label}"
FontSize="32"
Foreground="SlateGray" />
<Rectangle
Width="400"
Height="400"
Fill="Aquamarine" />
</StackPanel>
</DataTemplate>
<DataTemplate
x:Key="Preferences">
<StackPanel>
<TextBlock
Text="{Binding Label}"
FontSize="32"
Foreground="SlateGray" />
<Rectangle
Width="400"
Height="400"
Fill="Khaki" />
</StackPanel>
</DataTemplate>
<DataTemplate
x:Key="Properties">
<StackPanel>
<TextBlock
Text="{Binding Label}"
FontSize="32"
Foreground="SlateGray" />
<Rectangle
Width="400"
Height="400"
Fill="LawnGreen" />
</StackPanel>
</DataTemplate>
<DataTemplate
x:Key="Settings">
<StackPanel>
<TextBlock
Text="{Binding Label}"
FontSize="32"
Foreground="SlateGray" />
<Rectangle
Width="400"
Height="400"
Fill="Violet" />
</StackPanel>
</DataTemplate>
</ContentControl.Resources>
</ContentControl>
</Grid>
</Page>
C#
using System.Collections.Generic;
using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
namespace App17
{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
listBox.ItemsSource =
new List<PropertyPageViewModel>(
new PropertyPageViewModel[]
{
new OptionsPropertyPageViewModel(),
new PreferencesPropertyPageViewModel(),
new PropertiesPropertyPageViewModel(),
new SettingsPropertyPageViewModel(),
});
}
}
public abstract class PropertyPageViewModel
{
public abstract string Label { get; }
}
public class OptionsPropertyPageViewModel : PropertyPageViewModel
{
public override string Label { get { return "Options"; } }
}
public class PreferencesPropertyPageViewModel : PropertyPageViewModel
{
public override string Label { get { return "Preferences"; } }
}
public class PropertiesPropertyPageViewModel : PropertyPageViewModel
{
public override string Label { get { return "Properties"; } }
}
public class SettingsPropertyPageViewModel : PropertyPageViewModel
{
public override string Label { get { return "Settings"; } }
}
public class PropertyPageTemplateSelector : DataTemplateSelector
{
protected override DataTemplate SelectTemplateCore(object item, DependencyObject container)
{
if (item == null) return base.SelectTemplateCore(item, container);
var contentControl = (ContentControl)container;
var viewModel = (PropertyPageViewModel)item;
var templateKey = viewModel.Label;
return (DataTemplate)contentControl.Resources[templateKey];
}
}
}
i placed one button in a page .when click on that need to show 1 to 30 numbers in combobox as a popup in that page only.please tell me how to acheive this?
Edit:
I have edited the answer with design,add an image as a local content in the project
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<Button Content="Button" Height="82" HorizontalAlignment="Left" Margin="44,59,0,0" Name="button1" VerticalAlignment="Top" Width="376" Click="button1_Click" />
<ListBox ItemsSource="{Binding item}" Width="376" Name="lst" Margin="56,128,48,76" Background="White">
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" DataContext="{Binding}" BorderBrush="Black">
<StackPanel Width="376" Orientation="Vertical" Height="Auto">
<Image Margin="200,20,-75,5" Height="50" Width="50" Source="{Binding img}"></Image>
<TextBlock Margin="-200,-15,90,3" Height="50" Width="50" Name="text" Text="{Binding text}" Foreground="Black"></TextBlock>
</StackPanel>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</Grid>
lst.visibility = visibility.collapsed;
private void button1_Click(object sender, RoutedEventArgs e)
{
lst.visibility = visibility.visible;
List<Itemss> data = new List<Itemss>();
for (int i = 0; i < 30; i++)
{
Itemss item = new Itemss();
item.text = i.ToString();
item.img = "/images.jpg";
data.Add(item);
}
lst.ItemsSource = data;
}
public class Itemss
{
public string text { get; set; }
public string img { get; set; }
}
}
YOu can make use of the ListPicker for WP7 instead of a ComboBox for WP7.
And to show the ListPicker in a popup, Place the ListPicker in a MessagePrompt.