I started off with a Grouped Items Page template and have my data displaying in groups. I added some margins around these items to improve spacing, but now when I hover over these items, the margin area shows as highlighted. I'm sure this is an easy one for xaml gurus. Please assist!!
Here's my markup:
<GridView.ItemTemplate>
<DataTemplate>
<!-- ******************* here is my margins ******************* -->
<Border BorderBrush="LightGray" BorderThickness="2" Margin="0,0,20,20">
<Grid HorizontalAlignment="Left" Width="390" Height="190">
<Grid.Background>
<ImageBrush ImageSource="/Assets/default.png" Stretch="None"/>
</Grid.Background>
<StackPanel Orientation="Horizontal" VerticalAlignment="Top">
<Image VerticalAlignment="Top" Stretch="None" Source="{Binding ImageUrl}" Margin="10,10,0,0"/>
<StackPanel MaxWidth="270">
<TextBlock Text="{Binding Summary}"/>
<TextBlock Text="{Binding Brand}" />
<TextBlock Text="{Binding Detail}" TextWrapping="Wrap" />
</StackPanel>
</StackPanel>
</Grid>
</Border>
</DataTemplate>
</GridView.ItemTemplate>
Your ItemTemplate just populates over the existing style template for the GridViewItem Style which if you look in the default template shown in that link you'll see a Rectangle named "PointerOverBorder" which is shown (via the VisualStateManager) in the PointerOver state with its Fill set to ListViewItemPointerOverBackgroundThemeBrush.
You could go into the template (right-click, edit template) and remove it, or add your margins, or make it transparent or a number of options. Or could just overwrite the brush resource on the instance to be transparent or something kind of like;
<blah.Resources>
<SolidColorBrush x:Key="ListViewItemPointerOverBackgroundThemeBrush" Color="Transparent" />
</blah.Resources>
Hope this helps.
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'm new at developing apps for Windows 8, and its my first encounter with XAML.
I'm trying to build a GridView that will show a grid of 150x150 tiles. The GridView's XAML looks like this:
<GridView Grid.Row="2" Grid.Column="0"
x:Name="ClocksContainer"
VerticalAlignment="Top"
Height="190"
Margin="80,20,80,0"
HorizontalContentAlignment="Left">
<GridView.ItemTemplate>
<DataTemplate>
<Grid Height="150" Margin="75,0,940,0" Width="150" Background="#FF971485">
<TextBlock Text="12:23pm" HorizontalAlignment="Left" Margin="10,10,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Width="130" FontSize="32" Foreground="White"/>
<TextBlock Text="23 February, 2014" HorizontalAlignment="Left" Margin="10,48,0,0" TextWrapping="Wrap" VerticalAlignment="Top" RenderTransformOrigin="-0.444,0.385" Foreground="#B2FFFFFF"/>
<TextBlock Text="29° / 20°" HorizontalAlignment="Left" Margin="102,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#B2FFFFFF" TextAlignment="Right" FontSize="10"/>
<TextBlock Text="Party Cloudy" HorizontalAlignment="Left" Margin="10,128,0,0" TextWrapping="Wrap" VerticalAlignment="Top" Foreground="#B2FFFFFF" FontSize="10"/>
<Border BorderBrush="{x:Null}" HorizontalAlignment="Left" Height="45" Margin="10,78,0,0" VerticalAlignment="Top" Width="130">
<TextBlock Text="Chennai, India" HorizontalAlignment="Left" TextWrapping="Wrap" VerticalAlignment="Bottom" Foreground="White" Width="130" FontSize="14"/>
</Border>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.Items>
<x:String>test</x:String>
<x:String>test</x:String>
</GridView.Items>
</GridView>
However, in the output I'm finding that my grid items are stretching to the width of the grid itself!
To illustrate, here are two cropped screenshots of the rendered GridView.
The first screenshot shows how a grid item expands to the width of the GridView. (I've added the red outline myself in photoshop).
The second screenshot is of the gridview scrolled ahead to reveal teh second item. The red outline on the first item has been replicated via photoshop. The second item's background is a darker colour because it is mouse-over-ed.
My Question: How do I make the grid items not expand to the width? The intended output is this:
Remove Margin="75,0,940,0" from GridView's ItemTemplate
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.