can someone tell me how to style listpicker elements on fullscreen mode?
this is my code in page xaml:
<toolkit:ListPicker FullModeItemTemplate="{Binding lpkFullItemTemplate}"
ItemTemplate="{Binding lpkItemTemplate}"
x:Name="people"/>
the templates are:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Name="lpkItemTemplate">
<TextBlock Text="{Binding people_list}" />
</DataTemplate>
<DataTemplate x:Name="lpkFullItemTemplate">
<TextBlock Text="{Binding people_list}"/>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
i also want to know if there's a way to prevent the listpicker go in full mode. i've tried to set the ItemCountThreshold proprety but i found out that is private in wp8 sdk
thanks in advance
Test it
<toolkit:ListPicker>
<toolkit:ListPicker.FullModeItemTemplate>
<DataTemplate x:Name="ListPickerFullItemTemplate">
<TextBlock FontSize="32" Text="{Binding}"/>
</DataTemplate>
</toolkit:ListPicker.FullModeItemTemplate>
</toolkit:ListPicker>
Related
I'd really like to use RelativePanel in a UWP app I'm writing, to simplify visual state.
This is what I want
I've tried to achieve this with the following XAML:
<RelativePanel>
<TextBlock x:Name="Title" Height="50" Margin="15" FontSize="24"
RelativePanel.AlignTopWithPanel="True"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.AlignRightWithPanel="True">
</TextBlock>
<TextBox x:Name="Editor" Margin="15" Padding="20" HorizontalAlignment="Stretch"
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.RightOf="FileList">
</TextBox>
<ListView x:Name="FileList" HorizontalAlignment="Stretch" Margin="15"
RelativePanel.AlignRightWithPanel="True"
RelativePanel.Below="Title">
</ListView>
</RelativePanel>
This isn't working. Editor does not stretch. If I set Editor to RelativePanel.AlignRightWith="FilesList", it stretches past files list and fills the window.
Is there any way to do what I want with RelativePanel? Please don't post suggestions on how to do this in Grid, I can already do that - I want to use RelativePanel in this case
Your Editor control should have -
RelativePanel.AlignLeftWithPanel="True"
RelativePanel.Below="Title"
RelativePanel.LeftOf="FileList"
RelativePanel.AlignBottomWithPanel="True"
Note it should be LeftOf, not RightOf. You will also need AlignBottomWithPanel set to True.
I have a ListView and I want to put a border around each item in the ListView. Microsoft doesn't seem to have a system theme for the Border element.
What is the recommended way to theme the border so it looks good on Dark and Light theme?
Here is my ListView
<ListView ItemsSource="{Binding Products}" Header="My Header" Margin="10,5,10,5">
<ListView.HeaderTemplate>
<DataTemplate>
<TextBlock Text="My Header" Style="{ThemeResource HeaderTextBlockStyle}" />
</DataTemplate>
</ListView.HeaderTemplate>
<ListView.ItemTemplate>
<DataTemplate>
<Border>
<StackPanel>
<TextBlock Text="{Binding Name}"
Style="{StaticResource TitleTextBlockStyle}" />
<TextBlock Text="TextBlock 1:"
Style="{StaticResource ControlHeaderTextBlockStyle}" />
<TextBox Text="{Binding TextBlock1}"/>
<TextBlock Text=" TextBlock 2:"
Style="{ThemeResource ControlHeaderTextBlockStyle}"/>
<TextBox Text="{Binding TextBlock2}"/>
</StackPanel>
</Border>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
**************Edit 1****************
I should have put this. I want it in a Universal App targeted at WP8.1 and Windows 8.1, not just phone.
You probably just want the standard foreground color, right? (dark for light, light for dark). That would be the PhoneContrastForegroundBrush.
<Border BorderThickness="1" BorderBrush="{StaticResource PhoneContrastForegroundBrush}">
The previous answers lead me to look at system brushes and I found ApplicationForegroundThemeBrush, which I believe will work.
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
I would like to change the background of my grid to white when you hover over or select it. I'd also like to change the color of the text inside at the same time to black. This is specific to one page only, so it would need to be applied with an XKey or something as a guess. The grid starts with a transparent background, also.
I'm really struggling to find the direction for this. Please let me know if you have any ideas or links!
Here's my code:
<GridView.ItemTemplate>
<DataTemplate>
<Grid VerticalAlignment="Top" HorizontalAlignment="Left" Width="335" Height="152">
<StackPanel Orientation="Horizontal" Margin="2,2,2,2" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Margin="13,0,13,0" Orientation="Vertical" VerticalAlignment="Top" HorizontalAlignment="Left">
<StackPanel Orientation="Horizontal" VerticalAlignment="Bottom">
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Town}" />
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding State}"/>
<TextBlock Style="{StaticResource SmallText}" Text=", "/>
<TextBlock Style="{StaticResource SmallText}" Text="{Binding Postcode}"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
Thanks for any help.
It seems like you would probably want to modify your GridView's ItemContainerStyle and change its background and visual states to match your requirements. Check my answer to an earlier question related to restyling items here to learn how to extract and modify these styles and templates.
Here is the XAML:
<ListBox ItemsSource="{Binding Documents}" BorderBrush="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" FontSize="12" FontWeight="Bold" />
<TextBlock Text="{Binding ID}" FontSize="10" FontStyle="Italic" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ContextMenu>
<ContextMenu ItemsSource="{Binding CategoryList}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Command="{Binding AddDocumentToCategoryContextMenuCommand}" Header="{Binding Category.Name}" />
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
Ok so the ListBox's ItemSource is bound to the Documents collection in the VM and properly renders the Titles and IDs
The Context Menu's ItemSource is bound to the CategoryList collection in the VM and properly renders the list of categories.
The problem I have is with the Command Binding:
Command="{Binding AddDocumentToCategoryContextMenuCommand}"
Since the ItemSource for the ContextMenu is already set, it tries to get the AddDocumentToCategoryContextMenuCommand from CategoryList. Obviously the command is not there, it is a member of the VM.
I do not want any references to the VMs or Models in the XAML. Everything is constructed using Unity and VM-View is associated in App.xaml:
<Application.Resources>
<DataTemplate DataType="{x:Type vms:FeedViewModel}">
<views:FeedView/>
</DataTemplate>
<DataTemplate DataType="{x:Type vms:DocumentsViewModel}">
<views:DocumentsView/>
</DataTemplate>
<DataTemplate DataType="{x:Type vms:ManagementViewModel}">
<views:ManagementView/>
</DataTemplate>
<DataTemplate DataType="{x:Type dev:DevelopmentViewModel}">
<dev:DevelopmentView />
</DataTemplate>
</Application.Resources>
How can I databind to a member of the VM from within the ContextItem.
Thanks.
UPDATED edit #1 starts Here
Here is the updated xaml (but still not working but some insight gained):
<ListBox ItemsSource="{Binding Documents}" x:Name="Results" BorderBrush="{x:Null}">
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Title}" FontSize="12" FontWeight="Bold" />
<TextBlock Text="{Binding ID}" FontSize="10" FontStyle="Italic" />
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
<ListBox.ContextMenu>
<ContextMenu ItemsSource="{Binding CategoryList}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Command="{Binding ElementName=Results, Path=DataContext.AddDocumentToCategoryContextMenuCommand}" Header="{Binding Category.Name}" />
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</ListBox.ContextMenu>
</ListBox>
I have this example working for a simple example that does not use a ContextMenu. It appears that the ContextMenu (even though attached to the ListBox) is not part of the user control visual tree. The binding always comes back null / not found. I think the ContextMenu, because it is a floating "window" is constructed in its own tree and therefore cannot find the ListBox call "Results" in order to access the ListBox's DataContext.
Any thoughts on this? Any recommendations on how deal with?
Edit #2 Starts Here
In case you are are wondering, figured out the answer to the binding question:
This binding works:
Command="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.DataContext.AddDocumentToCategoryContextMenuCommand}
Hope this helps others with the same question.
One last update for completeness.
In order for the command to know which context menu item was clicked on, I had to change the xaml slightly (silly oversight):
<ListBox.ContextMenu>
<ContextMenu x:Name="Context" ItemsSource="{Binding CategoryList}">
<ContextMenu.ItemTemplate>
<DataTemplate>
<MenuItem Command="{Binding RelativeSource={RelativeSource AncestorType=ContextMenu}, Path=PlacementTarget.DataContext.AddDocumentToCategoryContextMenuCommand}"
CommandParameter="{Binding Category.ID}"
Header="{Binding Category.Name}" />
</DataTemplate>
</ContextMenu.ItemTemplate>
</ContextMenu>
</ListBox.ContextMenu>
Again, hope this helps others.
Use the ElementName property of the binding to specify that. You'd end up with something like this:
Command="{Binding ElementName=ViewModelObject
Path=AddDocumentToCategoryContextMenuCommand}"