Ok so my issue is that I have Grid inside DataTemplate inside ListBox. I need to change the column definitions of the grid when I change the orientation but unfortunately when I assign x:Name to the Grid I cannot access it in the code behind....Is there a specific way to do this?
I need to set the column definitions of the Grid with name "test".
There is the code:
<Grid x:Name="EmployeesGrid" Grid.Row="1" Height="550" VerticalAlignment="Bottom">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="280"/>
<ColumnDefinition Width="195"/>
</Grid.ColumnDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Visible" VerticalScrollBarVisibility="Visible" Grid.ColumnSpan="2" Margin="0,0,0,0">
<ListBox Height="605" HorizontalAlignment="Left" Margin="0,6,0,0" Name="listBox1" VerticalAlignment="Top" Width="480">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid x:Name="test">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="280"/>
<ColumnDefinition Width="195"/>
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding FullName}" FontSize="20" Grid.Column="0" HorizontalAlignment="Center"/>
<TextBlock Text="{Binding BranchName}" FontSize="20" Grid.Column="1" HorizontalAlignment="Center"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</Grid>
Try this....
var grid = (Grid)listBox1.FindName("test");
If accessing from a tapped event on the ListBox use this....
var listBox = (ListBox)sender;
var grid = (Grid)listBox.FindName("test");
If you want to go one further and get the TextBlock from the Grid use this....
var grid = (Grid)listBox1.FindName("test");
var textBlock = (TextBlock)grid.FindName("textBox's Name")
Hope that helps
Related
I have tried to make all the items in the itemtemplate into a single view as like in the below image, how to achieve this by using Xamarin CarouselView, i am using like this
carousel = new CarouselView();
carousel.BindingContext = this;
carousel.ItemTemplate = itemTemplate;
carousel.SetBinding(CarouselView.ItemsSourceProperty, new Binding(nameof(this.Items), mode: BindingMode.OneWay));
LinearItemsLayout linearItemsLayout = new LinearItemsLayout(ItemsLayoutOrientation.Horizontal);
linearItemsLayout.SnapPointsAlignment = SnapPointsAlignment.Start;
linearItemsLayout.SnapPointsType = SnapPointsType.Mandatory;
carousel.ItemsLayout = linearItemsLayout;
this.Children.Add(carousel,0,1);
Expected UI
The easiest way of doing something like that would be to use the Horizontal CollectionView
CollectionView can display its items in a horizontal list by setting its ItemsLayout property to HorizontalList:
When you check the documents it gives a similar example
<CollectionView ItemsSource="{Binding Monkeys}"
ItemsLayout="HorizontalList">
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid Padding="10">
<Grid.RowDefinitions>
<RowDefinition Height="35" />
<RowDefinition Height="35" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70" />
<ColumnDefinition Width="140" />
</Grid.ColumnDefinitions>
<Image Grid.RowSpan="2"
Source="{Binding ImageUrl}"
Aspect="AspectFill"
HeightRequest="60"
WidthRequest="60" />
<Label Grid.Column="1"
Text="{Binding Name}"
FontAttributes="Bold"
LineBreakMode="TailTruncation" />
<Label Grid.Row="1"
Grid.Column="1"
Text="{Binding Location}"
LineBreakMode="TailTruncation"
FontAttributes="Italic"
VerticalOptions="End" />
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
Alternatively, this layout can also be accomplished by setting the ItemsLayout property to a LinearItemsLayout object, specifying the Horizontal ItemsLayoutOrientation enumeration member as the Orientation property value:
<CollectionView ItemsSource="{Binding Monkeys}">
<CollectionView.ItemsLayout>
<LinearItemsLayout Orientation="Horizontal" />
</CollectionView.ItemsLayout>
...
</CollectionView>
This results in a single row list, which grows horizontally as new items are added:
Hi i am developing windows phone 8 app.i want to display image on grid view format and i am using listbox inside grid but i didn't get any changes in my output.my code is given below,I want display data on grid view format.
<Grid x:Name="ContentPanel" Margin="0,115,0,0" Background="#424340" Grid.RowSpan="5" />
<StackPanel Margin="0,0,0,0.083" Grid.Row="2" VerticalAlignment="Top" HorizontalAlignment="Center" Grid.RowSpan="2">
<ListBox x:Name="List12" ItemsSource="{Binding}" VerticalAlignment="Top" SelectionChanged="NotchsList12_SelectionChanged"
Margin="0,0,0,0" HorizontalAlignment="left" Width="Auto" Grid.RowSpan="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Stretch">
<Grid.RowDefinitions>
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<TextBlock Text="{Binding Titles}" Foreground="Black" Width="189" Height="34" TextWrapping="Wrap" Padding="0,0,0,0"></TextBlock>
<Image Source="{Binding Images}" Width="189" Height="195" Name="value" Stretch="Fill" VerticalAlignment="Top" ></Image>
<TextBlock Text="Text1" Margin="0,0,10,0" HorizontalAlignment="Stretch" Grid.Column="0" Grid.Row="1" />
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</StackPanel>
</Grid>
XDocument xmlDoc = XDocument.Parse(dataInXmlFile);
var query = from l in xmlDoc.Descendants("Category")
select new Class
{
Titles = l.Attribute("title").Value,
Images = l.Attribute("image").Value,
Articles = l.Element("SubCategory").Elements("Subcategory")
.Select(article => new Subclass
{
name = article.Attribute("name").Value,
Subimage = article.Attribute("subimage").Value,
Product = article.Element("Product").Elements("product")
.Select(articles => new Product
{
Price = articles.Element("productprice").Value,
ProductName = articles.Attribute("name").Value,
ProductImage = articles.Element("productimage").Value,
Shortdescription = articles.Element("productshortdiscription").Value
}).ToList(),
})
.ToList(),
};
foreach (var result in query)
{
Console.WriteLine(result.Titles);
Console.WriteLine(result.Images);
}
List12.DataContext = query;
I got out put like given below
1.Door 2.window 3.table 4.chair
I need out put like given below image
1.Door 2.window
3.table 4.chair
make ur stackPanel Orientation Vertical instead of Horizontal
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Top">
</StackPanel>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
Dont use grid, instead use LongListSelector using LayoutMode=Grid
Example:
<phone:LongListSelector ItemsSource="{Binding Categories}" LayoutMode="Grid" GridCellSize="200,200">
<phone:LongListSelector.ItemTemplate>
<DataTemplate>
<Border Background="#e67e22" Height="190" Width="190" Margin="6,0,0,0" Tap="Border_Tap" >
<TextBlock Text="{Binding Name}"></TextBlock>
</Border>
</DataTemplate>
</phone:LongListSelector.ItemTemplate>
</phone:LongListSelector>
I have an ListBox UserControl and there is a grid control in the DataTemplate. I used the MVVM to bind the data. For Orientation change, I am able to change the wide of the ListBox, but I don't find the solution to change the grid column width inside the listbox. Would you help me how to do it or provide a example or link to me. Thanks in advance.
There is my UserControl.xaml
<UserControl x:Class="CMSPhoneApp.QueueListControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480"
xmlns:local="clr-namespace:CMSPhoneApp" >
<UserControl.Resources>
<local:VisibilityConverter x:Key="VisibilityConverter"/>
<local:ColumSpanConverter x:Key="ColumSpanConverter"/>
</UserControl.Resources>
<ListBox x:Name="lst" HorizontalAlignment="Left" Margin="6,6,0,0" VerticalAlignment="Top" Width="400"
ItemsSource="{Binding Path=MyQueue}"
SelectedItem="{Binding Path=CurrentQueue, Mode=TwoWay}" Height="380" >
<ListBox.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1,1,1,1" BorderBrush="Blue">
<Grid x:Name="grd" Width="auto" HorizontalAlignment="Stretch" >
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="35" />
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="125" />
</Grid.ColumnDefinitions>
<Image Source="{Binding Type}" Grid.Row="0" Grid.Column="0"/>
<TextBlock Grid.Row="0" Grid.Column="1" Grid.ColumnSpan= "{Binding isSpan, Converter={StaticResource ColumSpanConverter}}" Text="{Binding summary}" TextWrapping="Wrap"
Style="{StaticResource PhoneTextAccentStyle}" />
<Button x:Name="btnAction" Grid.Row="0" Grid.Column="3" ClickMode="Press" Click="btnAction_Click" Style="{StaticResource ButtonStyle1}"
Visibility="{Binding isVisibility, Converter={StaticResource VisibilityConverter}}"
Tag="{Binding callNumber}">
<Button.Content>
<TextBlock Width="85" Height="70" Text="{Binding ActionCaption}"
Style="{StaticResource LabelStyle_20}" />
</Button.Content>
</Button>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The OrientationChange code:
private void TestPage_OrientationChanged(
object sender, OrientationChangedEventArgs e)
{
ListBox lstControl = lst.lst;
Grid g = lstControl.ItemContainerGenerator.ContainerFromIndex(0) as Grid;
if (e.Orientation.ToString().Contains("Portrait"))
lst.lst.Height = 400;
else
lst.lst.Height = 120;
}
Instead of absolute values for the column width, you should use percentage or "Star Sizing". Star sizing allows the width of a column (or height of a row) to grow or shrink as the available size changes.
Here is an example to use:
<Grid.ColumnDefinitions>
<ColumnDefinition Width=".1*" />
<ColumnDefinition Width=".6*"/>
<ColumnDefinition Width=".3*" />
</Grid.ColumnDefinitions>
Along with this you should remove the Width value of the ListBox and allow it to fill all available space.
I am using MVVM pattern and I am trying to bind a public ObservableCollection Friends property to LongListSelector
<toolkit:LongListSelector
ItemsSource="{Binding Friends}"
GroupHeaderTemplate="{StaticResource movieGroupHeader}"
ListHeaderTemplate="{StaticResource movieListHeader}">
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<Grid Margin="12,8,0,8">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="1" VerticalAlignment="Top">
<TextBlock Text="{Binding MyBoxName}" Style="{StaticResource PhoneTextLargeStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}" Margin="12,-12,12,6"/>
<TextBlock Text="{Binding MyBoxID}" Style="{StaticResource PhoneTextNormalStyle}" TextWrapping="Wrap" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
<StackPanel Orientation="Horizontal">
<TextBlock Text="Status:" Style="{StaticResource PhoneTextSmallStyle}"/>
<TextBlock Text="{Binding Status}" Style="{StaticResource PhoneTextSmallStyle}" FontFamily="{StaticResource PhoneFontFamilySemiBold}"/>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
Now issues is when i try to add
_friends.Add(new Model.Friends
{
MyBoxID = e.RosterItem.Jid,
MyBoxName = e.RosterItem.Name,
Status = Matrix.Xmpp.PresenceType.unavailable
})
it gives InvalidCastException so i tried List instead of ObservableCollection. Now i don't get exception but nothing is displayed in LLS. How can i bind My ObservableCollection property to LLS with Grouping.
For LongListSelector you need not just a collection, but some more complex structure to support grouping
Look at LongListCollection. It's great class that should help you
Usage:
var list = new LongListCollection<Event, string>(Events, x => x.Date.ToLongDateString());
I am trying to use a collection of checkboxes (created in runtime) within a ListBox. The XAML I am writing is
<ListBox DataContext="{Binding}" Name="cuisineList">
<ListBox.ItemTemplate>
<DataTemplate>
<Grid Height="45" Name="grid1" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="230*" />
<ColumnDefinition Width="230*" />
</Grid.ColumnDefinitions>
<CheckBox Content="{Binding content}" Name="{Binding name}" Grid.Column="0"/>
<CheckBox Content="{Binding content}" Name="{Binding name}" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
and the code is
public ObservableCollection<Cuisine> Items = new ObservableCollection<Cuisine>();
public Search()
{
InitializeComponent();
for (int i = 0; i < 100; i++)
{
Items.Add(new Cuisine());
}
cuisineList.DataContext = Items;
}
But when I run my app, I don't see any check box. Please point out the mistake and help me rectify it. Thanks in advance!
You need to set the itemsource of the listbox as follows
<ListBox ItemsSource="{Binding Items}" Name="cuisineList">
<Grid Height="45" Name="grid1" Margin="0,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="230*" />
<ColumnDefinition Width="230*" />
</Grid.ColumnDefinitions>
<CheckBox Content="{Binding content}" Name="Check1" Grid.Column="0"/>
<CheckBox Content="{Binding content}" Name="Check2" Grid.Column="1"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
Also is there any restriction to write Items in *.xaml.cs file ??
If not write in a view model say PageViewModel.cs file
then Set Viewmodel class object as page.xaml data context.
(
this.DataContext = new PageViewModel();
Write the this statement in the constructor of Page.xaml.cs file)
Also verify that the Cuisine has public property Content
you need to set the items source on the listbox.
<ListBox ItemsSource="{Binding}" Name="cuisineList">