How to customize the TextBlock inside the LonglistSelector - xaml

<toolkit:LongListSelector>
<toolkit:LongListSelector.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Name}" FontSize="22" TextWrapping="Wrap" />
<TextBlock Name="Info" FontSize="18" TextWrapping="Wrap" />
</StackPanel>
</DataTemplate>
</toolkit:LongListSelector.ItemTemplate>
</toolkit:LongListSelector>
I have the above LongListSelector which selects the "Name"(Binded in the first Textblock )values from a list. I also wanted to additional text to it,for which i created one more Textblock below that. I couldn't add the text to the second TextBlock like(Info.Text="HI") because it is inside the LonglistSelector
How to give the values to the second Textblock??
Thanks

Do you mean Info is a property on the DataContext of the page and not on the current item where Name is?
If so, you can use a DataContextProxy to get to the data outside of the list item. If not, you'll have to be more clear on what you mean.

Related

ListBox Windows 10 Universal Header

I successfully added a listbox with databinding in my xaml:
But i forgot which attribute to use for the items header. My items contain to Textboxes "name", "money earned" and if i add items my items say for example "Mustermann", "300" but i need a headertemplate above the items which says "name" and "money earned" how do i add such a header for the items?
The xaml I already wrote isn't relevant for this question but if you are interested:
<ListBox x:Name="WorkersList" ItemsSource="{Binding}" MaxWidth="480" MaxHeight="400" VerticalAlignment="Top" HorizontalAlignment="Left">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding name}" HorizontalAlignment="Center" Width="100"></TextBlock>
<TextBlock Text="{Binding gehalt}" HorizontalAlignment="Center" Width="100"></TextBlock>
<ToggleSwitch></ToggleSwitch>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
You could use a ListView with a GridView. In each GridViewColumn, there is a property called Header.
EDIT:
You could use a ListView. Apparently there is a ListView.Header property in W10 apps. Have a look at this. Something like the following could work:
<ListView>
<ListView.Header>
<StackPanel>
<TextBlock Text="Name"/>
<TextBlock Text="Money earned"/>
</StackPanel>
</ListView.Header>
</ListView>
First of all,ListBox doesn't support Header
I'm not sure if i understand your question correctly, but If you mean you wanna have something like Table (have a header and data in it) I suggest you to use some useful classes like MyToolkit (DataGrid)
Helpful question in Stackoverflow

Binding from multi object in to one value in XAML

I have a ListView which have a DataTemplate like this:
<DataTemplate x:Key="FilterDataTemplate">
<StackPanel Orientation="Horizontal" Background="White" Height="50" HorizontalAlignment="Left">
<ComboBox x:Name="TermsItemComboBox" Width="160"
ItemsSource="{Binding ItemList}" Tag="{Binding}"
DisplayMemberPath="Key" SelectionChanged="AddTermsItem_SelectionChanged"
Background="#FFD1D1D1" SelectedItem="{Binding SelectedItem, Mode=TwoWay}" />
<TextBox x:Name="TermsInputTxt1" Text="{Binding FilterText, Mode=TwoWay}"
BorderBrush="#FF727272" Background="#FFD1D1D1" HorizontalAlignment="Left"
Width="200" FontSize="16" VerticalAlignment="Center"
Visibility="{Binding IsTxtForm, Converter={StaticResource BooleanToVisibilityConverter}}"
Height="45"/>
<TextBox x:Name="TermsInputTxt2" Text="{Binding FilterText, Mode=TwoWay}"
BorderBrush="#FF727272" Background="#FFD1D1D1" HorizontalAlignment="Left"
Width="200" FontSize="16" VerticalAlignment="Center"
Visibility="{Binding IsTxtForm, Converter={StaticResource BooleanToVisibilityConverter}}"
Height="45"/>
<Button x:Name="TrashBtn" HorizontalAlignment="Left" VerticalAlignment="Stretch"
BorderBrush="#FF575757" Foreground="#FF494949" BorderThickness="2" Tapped="TrashBtn_Tapped"
Style="{StaticResource DiscardAppBarButtonStyle}" Height="45" Width="55"
RenderTransformOrigin="0.5,0.5">
<Button.RenderTransform>
<CompositeTransform ScaleX="-1" />
</Button.RenderTransform>
</Button>
</StackPanel>
It's have a combobox and two TextBox. At default, the combobox don's show anything, just a blank item, I want when user type some text to the TermsInputTxt1 or TermsInputTxt2, the combobox will select the first item.
I try to bind the selectedindex of combobox with the lenght of those two textbox with a converter but look like XAML doesn't support multi binding like that.
Any suggest? Thank you!
So, this is a bit of a difficult situation. You have a couple of ways of going about it:
Bind the TermsInputTxt1 and TermsInputTxt2 to the ViewModel, with the Setter on the ViewModel controlling an ObservableCollection, adding and removing items as they get set in the property.
Create a Model for each entry with a Value field (string) and bind the Terms... to accessors in the ViewModel. Then, the ComboBox items will automatically change.
I suggest doing the first one. You'll have to have a SelectedItem/SelectedIndex property in the ViewModel which the ComboBox will bind to. You may also want to change the method by which the binding on the TextBoxs are updated, either so that they are updated immediately (lots of processing) or after it loses focus (less processing, but won't update the UI immediately).

How to access a control present inside a datatemplate of listbox in metro app?

I am developing a windows 8 metro app in which I have listbox which contains a set of textblocks and a Image.
<ListBox x:Name="lstbxbStudents" Background="Transparent" ItemContainerStyleSelector="{StaticResource ItemStyleSelector}" ScrollViewer.VerticalScrollBarVisibility="Auto" ItemTemplate="{StaticResource LandscapeItemTemplate}" Height="476" SelectionChanged="lstbxbProducts_SelectionChanged_1" Style="{StaticResource ListBoxStyle1}" HorizontalAlignment="Left" Width="901">
</ListBox>
For that image ImgCmt I have set the source of the Image static inside the datatemplate of the listbox.
<Page.Resources>
<CollectionViewSource x:Name="cvs2" IsSourceGrouped="true" />
<!-- TODO: Delete this line if the key AppName is declared in App.xaml -->
<x:String x:Key="AppName">Students Screen</x:String>
<DataTemplate x:Key="LandscapeItemTemplate" >
<StackPanel Orientation="Horizontal">
<StackPanel Width="30"></StackPanel>
<StackPanel Width="120" Orientation="Horizontal">
<TextBlock Text="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="350">
<TextBlock Text="{Binding studsc}" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="10"></StackPanel>
<StackPanel Width="100">
<TextBlock Text="{Binding stuum}" x:Name="txtblkstuum" HorizontalAlignment="Left" />
</StackPanel>
<StackPanel Width="150">
<TextBlock Text="{Binding stugrp}" VerticalAlignment="Center" TextAlignment="Right" HorizontalAlignment="Center" />
</StackPanel>
<StackPanel Width="100">
<TextBlock Text="{Binding stusection, Mode=TwoWay}" TextAlignment="Center" x:Name="txtbxbstusection" Tag="{Binding stunum}" VerticalAlignment="Center" HorizontalAlignment="Right" />
</StackPanel>
<StackPanel Width="50"></StackPanel>
<StackPanel>
<Image Source="Assets/comments.png" Name="ImgCmt" PointerPressed="Image_PointerPressed_1" VerticalAlignment="Center" Width="20" Height="20"></Image>
</StackPanel>
</StackPanel>
</DataTemplate>
</Page.Resources>
my objective is that I want to change the source of the image to different image source(change the image) in codebehind depnding upon some condition for that I need to access the control present inside a datatemplate of listbox in metro app ?
How can I do this :
How to access a control present inside a datatemplate of listbox in metro app?
What are the different ways in which I can do this?
How can I change the source of the image to different image source(change the image) in codebehind depending upon some condition?
This is a common question. We've all asked it at least once. The problem is that these controls don't have a unique name, because they are in a repeater. As a result, you cannot use the logical tree in XAML. The logical tree is what lets you call things by name. Instead, you need to use the visual tree in XAML. The visual tree is what lets you access everything on the screen including the dynamically rendered elements that adorn controls and populate repeaters. Because the visual tree is so big and because a repeater repeats, you still have to constrain the scope of the visual tree so you can reliably locate the control you want to find. I hope this makes sense.
Solution here: http://blog.jerrynixon.com/2012/09/how-to-access-named-control-inside-xaml.html

how to assign resx resource to itemtemplate control

In my WP8 app, i have radio button where customized it through datatemplate and embedded a textblock in it. My question is how to assign a key from my resx resource file to assign text value, so that i can localize these datatemplate control names without any issues.
Below is my sample xaml:
<TextBlock x:Name="lblTileColor" TextWrapping="Wrap" Text="{Binding LocalizedResources.Themes_Tile_label, Source={StaticResource LocalizedStrings}}" />
<RadioButton x:Name="accentColor" GroupName="tileColor" IsChecked="true">
<RadioButton.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Rectangle Width="25" Height="25" Fill="{StaticResource PhoneAccentBrush}"/>
<TextBlock Width="10"/>
<TextBlock x:Name="lblDefaultAccent" Text="{Binding LocalizedResources.Themes_Tile_Default, Source={StaticResource LocalizedStrings}}" />
</StackPanel>
</DataTemplate>
</RadioButton.ContentTemplate>
</RadioButton>
Here i am trying to assign Themes_Tile_Default resx key to textblock named lblDefaultAccent control.
With above code i am seeing xaml error (i.e. Invalid XAML) in Datatemplate section - if i assign text value directly with hardcoding it is working...
any help to resolve this?

ListBox will only scroll up when put inside ExpanderView

I'm relatively new to XAML and Windows Phone development.
I have a ListBox that display a text block. Everything works fine when I just have the ListBox inside a grid, including the scrolling. I wanted the user to be able to collapse the ListBox if they wanted more space on the page to look at other elements, so I surrounded the ListBox with an ExpanderView. Once I did that though, the ListBox won't scroll down anymore. If I try to scroll down, it acts as if I am trying to scroll up and "squishes" the text vertically. If I try to scroll up, it also "squishes" the text vertically, but that is the expected behavior for scrolling up.
Here is the relevant part of my XAML code:
<toolkit:ExpanderView Header="Chatlog" x:Name="chatlogExpander" FontSize="24" VerticalAlignment="Top" Grid.Row="2">
<toolkit:ExpanderView.Items>
<ListBox ItemsSource="{Binding chatlog}" ScrollViewer.VerticalScrollBarVisibility="Auto" Grid.Row="2">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Vertical"/>
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate>
<DataTemplate>
<TextBlock x:Name="ChatBlock" TextWrapping="Wrap">
<Run Text="{Binding player}" Foreground="{Binding color}" FontSize="24" FontWeight="Bold"/><Run Text="{Binding text}" Foreground="{Binding color}" FontSize="24"/>
</TextBlock>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</toolkit:ExpanderView.Items>
</toolkit:ExpanderView>
I appreciate any help you guys can give me!
I tried an example with your code and after specifying a Height for the ListBox, it started to scroll fine.