windows phone 8 longlistselector loop through all childs - xaml

In my app, i have a longlistselector and i set the "DataContext = list" in the event PhoneApplicationPage_Loaded. Inside this longlistselector, i have this code:
<DataTemplate>
<StackPanel Margin="5,10" >
<Border BorderThickness="1" CornerRadius="5">
<Grid Margin="10,8" Tap="Grid_Tap_1" x:Name="gridPasta" Tag="{Binding Id_pasta}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="60"/>
</Grid.ColumnDefinitions>
<TextBlock Foreground="Black" HorizontalAlignment="Stretch" Text="{Binding Nm_pasta}" Grid.Column="0" TextWrapping="Wrap" VerticalAlignment="Top" TextTrimming="WordEllipsis" FontSize="24"/>
<Border Background="#E3F4FF" Grid.Column="1" CornerRadius="100">
<TextBlock Foreground="Black" Text="{Binding Qtde_pasta}" HorizontalAlignment="Center" TextWrapping="Wrap" VerticalAlignment="Top" FontSize="20"/>
</Border>
</Grid>
</Border>
</StackPanel>
</DataTemplate>
I want to set the background color of the specific Grid after i fill the LLS. I have search on internet about access LLS childs, but, nothing works. i have tried this link (Loop through longlistselector to get checkbox in itemtemplate), but the "SearchElement" not find the specific Grid.
My question is, how can i access this specific Grid after i fill the LLS?
Note: The specific Grid is known comparing the "Id_pasta" of the Grid.
Thanks for help.

You could add simple bool property (and implement PropertyChanged) to the class you're using for this datatemplate, bind it as background to the grid and use converter to convert it to desired backgroundcolor if true or false.

Related

SOLVED Pressing on ScrollViewer inside ListBox Item doesn't select the Item

I gave a ListBox that lists items. The items, can vary in size, but follow the same pattern:
picture................Metadata
ID
<ListBox Name="View" Grid.Row="2" ItemsSource="{Binding Human, ElementName=uc}"
SelectedItem="{Binding SelectedHuman, ElementName=uc}"
MouseDoubleClick="OnSubjectEditClick"
VerticalContentAlignment="Center"
VirtualizingPanel.IsVirtualizing="True"
VirtualizingPanel.ScrollUnit="Pixel"
ScrollViewer.CanContentScroll="True"
Grid.IsSharedSizeScope="True"
ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate >
<Border BorderBrush="#565656" BorderThickness="1" Margin="10" Padding="10">
<Grid>
<Grid.RowDefinitions>
<RowDefinition MaxHeight="300" />
<RowDefinition MaxHeight="50" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" MinWidth="300" MaxWidth="500" SharedSizeGroup="col1"/>
<ColumnDefinition MaxWidth="500" Width="*" SharedSizeGroup="col2"/>
</Grid.ColumnDefinitions>
<Image Grid.Row="0" Grid.Column="0" MaxHeight="300" MaxWidth="300" Source="{Binding Thumb}"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding Name}" FontWeight="Bold" TextAlignment="Center"/>
<local:MetadataView Grid.Column="1" Grid.RowSpan="2" Metadata="{Binding Metadata}" HorizontalAlignment="Stretch" VerticalAlignment="Center" IsEdit="False" />
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
The items inside Metadata .xaml looks like this. StackPanels containing actual Metadata are automatically generated by code inside "DisplayMode":
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
...........
<StackPanel/> //AutoGenerated
............
</StackPanel>
</ScrollViewer>
</Grid>
The problem I'm facing is the fact, that I need to be able to select an item inside the ListBox. But, by adding ScrollViewer in Metadata.xaml it seems I Reroute the selector, so it is trying to select an item in Metadata ScrollViewer instead of ListBox when I press the part of the ListBox containing Metadata. If I press on Thumbnail, or even RightClick on any part of the ListBox - it seems to select just fine.
[SOLVED] After playing around with available options in ScrollViewer I stumbled across Focusable. Setting it to False did the trick.
I hope it will help someone in the future.
<Grid VerticalAlignment="Center" HorizontalAlignment="Stretch">
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Disabled" CanContentScroll="False" Height="300" Focusable="False" >
<StackPanel x:Name="DisplayMode" VerticalAlignment="Center" Grid.IsSharedSizeScope="True" >
</StackPanel>
</ScrollViewer>
</Grid>

GridView in WIndowsPhone

Hi Everyone, I want to create an GridView like this in windows phone 8.1
1.GridView is not supporting AutoGenerateColumns
This is the outpuit i got. Here i tried to obtain the data from Sqlite and binded to the ItemsSource property of gridview in gridview load event of the cs file.
My code:
<Grid Grid.Row="1" x:Name="ContentRoot" Margin="19,9.5,19,0">
<GridView x:Name="grdUser" HorizontalAlignment="Left" Height="auto" VerticalAlignment="Top" Width="auto" Loaded="grdUser_Loaded">
<GridView.HeaderTemplate><DataTemplate>
<Border Margin="5" BorderBrush="White" BorderThickness="1"><Grid ><Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>
<TextBlock Text="UserName" />
<TextBlock Text="UserPassword" Grid.Column="1"/>
<TextBlock Text="CreatedDate" Grid.Column="2"/>
</Grid></Border> </DataTemplate></GridView.HeaderTemplate><GridView.ItemTemplate>
<DataTemplate>
<Border Margin="5" BorderBrush="White" BorderThickness="1"><Grid><Grid.ColumnDefinitions><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/><ColumnDefinition Width="Auto"/></Grid.ColumnDefinitions>
<TextBlock x:Name="tbUserName" Text="{Binding UserName}"/>
<TextBlock x:Name="tbUserPassword" Text="{Binding UserPassword}" Grid.Column="1"/>
<TextBlock x:Name="tbCreatedDate" Text="{Binding CreationDate}" Grid.Column="2"/>
</Grid></Border></DataTemplate></GridView.ItemTemplate></GridView> </Grid>
Is there any other controls for kind of requirements.
Take a look at the MyToolkit library, it has a datagrid control that could be ok for you.
https://github.com/MyToolkit/MyToolkit/wiki/DataGrid

Windows 10 xaml Controls Centre Screen

I'm working on an app for windows 10. I've previously worked on a handful of Windows 7 applications and I'm trying to get use to the many differences now. I'm trying my luck at a universal app, and I'm wanting to centre a handful of controls so that no matter the screen/windows size the login details are centred.
I've been searching for help with this for a while, but I've found a lot of this to be in its' infancy; in other words there's not a lot of places I'm finding relevant information, never mind helpful. I was hoping someone on here could point me in the right direction?
Here's the window on the desktop view:
Here's what I'm meaning, the textboxes, labels ect don't move with the resize of the window, let alone different screen sizes.
</Page.Resources>
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" FlyoutBase.AttachedFlyout="{StaticResource FlyoutBase1}">
<CheckBox x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" Margin="1038,441,0,0" VerticalAlignment="Top" ClickMode="Press"/>
<TextBox x:Name="txtUserName" HorizontalAlignment="Left" Margin="818,441,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" Width="202"/>
<PasswordBox x:Name="txtPassword" HorizontalAlignment="Left" Margin="818,478,0,0" VerticalAlignment="Top" Width="202"/>
<TextBlock x:Name="textBlock" HorizontalAlignment="Left" Margin="723,446,0,0" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Top"/>
<TextBlock x:Name="textBlock_Copy" HorizontalAlignment="Left" Margin="735,478,0,0" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Top"/>
<Button x:Name="btnSignin" Content="Login" HorizontalAlignment="Left" Margin="959,539,0,0" VerticalAlignment="Top" Width="61"/>
<Button x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Left" Margin="818,539,0,0" VerticalAlignment="Top" Width="116"/>
<ProgressRing x:Name="progressring1" HorizontalAlignment="Left" Margin="873,592,0,0" VerticalAlignment="Top" Height="87" Width="103"/>
<TextBlock x:Name="txtStatus" HorizontalAlignment="Left" Margin="818,510,0,0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
<Grid HorizontalAlignment="Left" Height="180" Margin="692,412,0,0" VerticalAlignment="Top" Width="496"/>
</Grid>
Don't use Margins for positioning. Use margins only to enforce margins around the object.
To center an element in its parent set its HorizontalAlignment or VerticalAlignment to Center.
For more control, use layout controls such as Grid, StackPanel, and RelativePanel to position the controls where you want. For your layout you could set up 3 Rows and 3 Columns in your Grid to place the controls overall and then set the HorizontalAlignment to place the controls in the grid. Here's a quick update to your Xaml that will keep things centered so long as the window is wide enough for everything to fit (you can use adaptive techniques to reflow things for narrower views)
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" >
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="240"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<CheckBox Grid.Column="2" Grid.Row="1" Margin="10,0" x:Name="chckRemember" Content="Remember" HorizontalAlignment="Left" VerticalAlignment="Top" ClickMode="Press"/>
<TextBox Grid.Column="1" Grid.Row="1" x:Name="txtUserName" HorizontalAlignment="Stretch" TextWrapping="Wrap" Text="" VerticalAlignment="Top" />
<PasswordBox Grid.Column="1" Grid.Row="2" x:Name="txtPassword" HorizontalAlignment="Stretch" VerticalAlignment="Top" />
<TextBlock x:Name="textBlock" Margin="10,0" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="User Name:" VerticalAlignment="Center"/>
<TextBlock x:Name="textBlock_Copy" Margin="10,0" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right" TextWrapping="Wrap" Text="Password:" VerticalAlignment="Center"/>
<Button Grid.Column="1" Grid.Row="3" x:Name="btnSignin" Content="Login" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<Button Grid.Column="1" Grid.Row="3" x:Name="btnCreatAccount" Content="Create Account" HorizontalAlignment="Right" VerticalAlignment="Top" />
<ProgressRing x:Name="progressring1" HorizontalAlignment="Left" VerticalAlignment="Top" Height="87" Width="103"/>
<TextBlock x:Name="txtStatus" HorizontalAlignment="Left" TextWrapping="Wrap" Text="" VerticalAlignment="Top" FontSize="9.333"/>
<Grid HorizontalAlignment="Left" Height="180" VerticalAlignment="Top" Width="496"/>
</Grid>
See Quickstart: Defining layouts and Adding layout controls on MSDN.
The above is a the right approach. Using a Grid Layout with auto as the row height or column width is a good approach because they automatically will scale with you. Depending on the difficulty of your project you can also use Adaptive Triggers. Here is a really intro example to using Adaptive Triggers, http://jamesqquick.com/windows-10-adaptive-triggers-intro/ . This way you can, for instance, make text bigger depending on the screen size.
You're doing good by testing all of the different sizes. This is important! I usually just run as a Windows 10 app and resize it in all directions!

Control not resizing with the gridsplitter

I have a dock panel to the left of my screen which contains a listbox. The listbox is populated with custom items, defined in another class. To the right of my listbox i have a gridsplitter.
When i click and drag my gridsplitter, the listbox gets resized as expected, howvever the items inside do not.
I would like the items inside to resize accordingly so i can use textrimming when the control would be cut off.
I currently have:
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150" MaxWidth="500" MinWidth="100"/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<toolkit:DockPanel HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Margin="0,0,9,0">
<Button toolkit:DockPanel.Dock="Top" Height="30" Content="Create" Visibility="{Binding Path=IsVisible, Mode=TwoWay}" Command="{Binding Path=Create, Mode=TwoWay}" />
<ScrollViewer HorizontalAlignment="Stretch" VerticalAlignment="Stretch" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Hidden">
<ListBox HorizontalAlignment="Stretch" ItemContainerStyle="{StaticResource ItemContainerStyle}" ItemsSource="{Binding Path=ViewModel, Mode=TwoWay}" SelectedItem="{Binding Path=Selected, Mode=TwoWay}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical" HorizontalAlignment="Stretch">
<ContentControl HorizontalAlignment="Stretch">
<myNamespace:MycustomControl HorizontalAlignment="Stretch" DataContext="{Binding}" Height="40"/>
</ContentControl>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</ScrollViewer>
</toolkit:DockPanel>
<sdk:GridSplitter Width="10" HorizontalAlignment="Right" Grid.Row="1" Style="{StaticResource VerticalGridSplitterStyle}" />
Also within my custom item class, everything is defined HorizontalAlignment = Stretch and has no fixed width set.
Edit: Also i have tried binding my custom item's width to my listbox width with no luck.
It turned out that the horizontal scroll bar was causing the issue (even though it wasn't visible)
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
Solved my issue

Binding Listbox item source to a collection of collections in windows phone 7

I am trying to bind a Listbox ItemSource to a collection of multiple Lists. i.e.
List PersonCollection
List Person
List Collection
Now I need to show items from both of these list. In wpf you could use HierarchicalDataTemplate i believe, but not sure how I can do it in windows phone 7. Tried with Blend and it generates the following data template.
<DataTemplate x:Key="PersonDataTemplate">
<Grid>
<StackPanel Margin="0,0,1,0" Orientation="Vertical" VerticalAlignment="Top">
<TextBlock Margin="0,0,1,0" TextWrapping="Wrap" Text="{Binding Person[0].Name}" d:LayoutOverrides="Width"/>
<TextBlock Margin="0,0,1,0" TextWrapping="Wrap" Text="{Binding Collection[0].Total}" d:LayoutOverrides="Width"/>
</StackPanel>
</Grid>
</DataTemplate>
<ListBox Height="300" x:Name="personList" ItemsSource="{Binding PersonCollection}" Margin="10,0" ItemTemplate="{StaticResource PersonDataTemplate}"/>
Is there another way I can do this? I have tried to set the DataContext of Textbox in DataTemplate to individual arrays but did not seem to work. Cant find anything similar on the net apart from the confirmation that HierarchicalDataTemplate is not supported in Windows Phone 7.
I have other ways to do but none elegant..
Thanks in advance.
Regards
I think your scenario can be solved with two level ListBoxes instead of Tree-Heirarchy. See if the below trick works. Now you will see Both of your inner collection side by side in a Grid which are two other ItemsControls(Or you can have ListBoxes)
<DataTemplate x:Key="PersonCollextionItem">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.5*"/>
<ColumnDefinition Width="0.5*"/>
</Grid.ColumnDefinitions>
<ItemsControl ItemsSource="{Binding ListPerson}" ItemTemplate="{StaticResource Templ1}" Grid.Column="0"/>
<ItemsControl ItemsSource="{Binding ListCollection}" ItemTemplate="{StaticResource Templ2}" Grid.Column="1"/>
</Grid>
</DataTemplate>
<DataTemplate x:Key="Templ1">
<TextBlock Margin="0,0,1,0" Text="{Binding Name}" />
</DataTemplate>
<DataTemplate x:Key="Templ2">
<TextBlock Margin="0,0,1,0" Text="{Binding Total}" />
</DataTemplate>
<ListBox Height="300" x:Name="personList" ItemsSource="{Binding PersonCollection}" Margin="10,0" ItemTemplate="{StaticResource PersonCollextionItem}"/>