At the moment, I keep repeating the XAML below used in titles what I want to improve.
<Border Grid.Row="1" Grid.Column="1" Background="{StaticResource Brush.Black24}" CornerRadius="4">
<TextBlock Margin="8" FontFamily="Segoe UI Semibold" FontSize="14" Foreground="White" VerticalAlignment="Center" Text="BUILT IN MODULES"/>
</Border>
Apparently TextBlocks have no template. I think creating a UserControl is a bit excessive. In addition, I would have to deal with Attached Properties. Any ideas?
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 ListBox with this template in it.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<StackPanel Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000" Width="460" MinHeight="76">
<StackPanel Margin="4,4,-4,-153">
<TextBlock Text="{Binding }" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
<TextBlock " Text="{Binding Mode=OneWay}" HorizontalAlignment="Center" VerticalAlignment="Top" Foreground="Black" TextWrapping="Wrap"/>
</StackPanel>
</Border>
</StackPanel>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
Yet I have to force set a Width and Height on the Border otherwise it makes like Width and Height of "2".
It is like it does not understand I have 2 TextBlock inside it and won't expand to fill both of them.
This leaves me with having to put a fixed height and width in what I don't like as if the text is too big it gets cutoff.
You can toss out your StackPanel's because you don't need them, they're also what's keeping your wrapping from working, you need a panel like a Grid for that. The negative Margin's also isn't something you'd normally see in a DataTemplate for a ListBox so I'd guess you have some other funky layout stuff going on from that sort of practice elsewhere up the tree.
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="Template">
<Grid Margin="0,10">
<Border BorderBrush="Black" BorderThickness="1" Background="#FFFFC000"/>
<TextBlock TextWrapping="Wrap"
HorizontalAlignment="Center" Margin="4,4,-4,-153">
<Run Text="{Binding }"/><LineBreak/>
<Run Text="{Binding Mode=OneWay}"/>
</TextBlock>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
So unless I'm missing something somewhere this should fix you up as the Grid will handle the sizes of its children for you and consume the space necessary in its parent. However if there's something else in your structure pushing stuff around and won't let it consume that space it should invoke your Wrapping.
Hope this helps :)
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.
I am working on a Metro App using C++ and XAML. I want to create a polygon shape and add text inside it.
At first I thought of defining my own Controltemplate and apply it to Textblock but unfortunately it does not understand TargetType = "TextBlock".
Secondly, I thought of inheriting the Polygon class and see if I can do anything there but that class is sealed.
Any ideas on how to achieve this?
In WPF XAML you could do something simple like this:
<Grid Width="60" Height="100">
<Ellipse Fill="Yellow"/>
<TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" Text="Hello"/>
</Grid>
To get text in the centre of a yellow ellipse.
I'm guessing something that simple will work on WinRT.
You can use something like this with ContentControl or so many other controls:
<ContentControl Width="200" Height="100" Content="Something">
<ContentControl.Template>
<ControlTemplate>
<Grid>
<Ellipse Fill="Red"/>
<TextBlock Text="{Binding Content,RelativeSource={RelativeSource FindAncestor,AncestorType=ContentControl}}"
TextWrapping="Wrap"
VerticalAlignment="Center"
HorizontalAlignment="Center"/>
</Grid>
</ControlTemplate>
</ContentControl.Template>
</ContentControl>