I have the following UserControl in a Windows Phone 8.1 Project:
<UserControl
x:Name="AuditItem"
x:Class="WindowsPhone.OverviewAuditItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:WindowsPhone"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="Auto"
Tapped="AuditItem_Tapped"
Style="{StaticResource MyUserControlStyle}">
<Grid x:Name="contentGrid">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Height="160" >
<TextBlock x:Name="textAuditName" Margin="10,10,0,0" TextWrapping="Wrap" Text="Audit Name" VerticalAlignment="Top"/>
<TextBlock x:Name="textCreatedDate" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center"/>
<TextBlock x:Name="textLastOpened" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" />
<!--<Button Content="This styling works but the UC style doesn't"
Height="100"
Style="{StaticResource MyButtonStyle}" />-->
<StackPanel Orientation="Horizontal" Grid.Column="2">
<TextBlock x:Name="textDeadline" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Grid.Column="2"/>
<Grid x:Name="blockOverdue" Margin="10,0,0,0">
<Image Source="PNGs/alerticon.png" Stretch="None" HorizontalAlignment="Center" />
</Grid>
</StackPanel>
<TextBlock x:Name="textTemplate" HorizontalAlignment="Left" TextWrapping="Wrap" Text="TextBlock" VerticalAlignment="Center" Grid.Column="3"/>
</StackPanel>
</Grid>
I have defined my style in the App.xaml file:
<Style TargetType="local:OverviewAuditItem" x:Key="MyUserControlStyle" >
<Setter Property="Background" Value="Blue" />
<Setter Property="FontFamily" Value="Arial Black" />
<Setter Property="FontSize" Value="36" />
</Style>
I know that the Style is being "found" because I don't get the "Resource could not be resolved" error (which I do get if I change the name for a test)
None of the styling is being applied though. I expected the UserControl background to be blue and all textblocks on the control to use the text size and family. I'm pretty new to this so maybe it doesn't work like this.
My questions: Should it work like I'm assuming? if yes, then where am I going wrong, if no, then how do I apply styling to a UserControl?
As a test - you can see I have a commented out button, the styling for this does work.
So your Style is targeting the wrong Type to get what I think you are asking for you will need to do this:
This Targets any UserControl's that use the MyUserControlStyle key
<Style TargetType="UserControl" x:Key="MyUserControlStyle" >
<Setter Property="Background" Value="Blue" />
</Style>
This Targets all TextBlocks on the Page -
Notice no key here so it targets all textblocks. To target individual TextBlocks add a key and implement it in the TextBlocks Style property
<Style TargetType="TextBlock" >
<Setter Property="FontFamily" Value="Arial Black" />
<Setter Property="FontSize" Value="36" />
</Style>
For more info on WPF styles take a look here
Related
I'm creating an application for educational purposes. How can i use multiple User controls in my "MainWindow.xaml"?
I want to use User controls on my MainWindow so that I wont need multiple windows. So after you press next on the sign up layout,
it should take you to the thank you screen which is also another UserControl class. Although in the same Window.
I've read as many different "solutions" as I could, without any real luck..
Here's the code I have atm.
Main Window.xaml
<Window x:Class="WpfApp1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="700" Width="700"
WindowStartupLocation="CenterScreen">
<Grid>
<!--Background image-->
<Grid.Background >
<ImageBrush ImageSource="login-page-background-3.jpg"/>
</Grid.Background>
<!--Main content scroll-->
<ScrollViewer VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto">
<local:SignUpControl>
</local:SignUpControl>
</ScrollViewer>
</Grid>
MainWindow.xaml.cs has no code...
SignUpControl.Xaml
<UserControl x:Class="WpfApp1.SignUpControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<StackPanel
VerticalAlignment="Center"
HorizontalAlignment="Center"
TextBlock.TextAlignment="Center">
<!--Login main content white box-->
<Border Background="WhiteSmoke"
Opacity="0.4"
CornerRadius="30"
Padding="15 50 15 15"
Width="350"
Margin="50 50 50 0">
<StackPanel>
<!--Sign Up header-->
<TextBlock FontSize="20"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="auto"
FontFamily="Goudy Stout" >Sign Up</TextBlock>
<!--Sign up subtext-->
<TextBlock FontSize="14"
HorizontalAlignment="Center"
VerticalAlignment="Top"
Height="auto"
FontFamily="Ravie" >It's about to get fun!</TextBlock>
<!--Inner grid for Username & Password-->
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!--Textbox for username-->
<TextBox Grid.Row="0" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="UsernameBox" Margin="5"/>
<TextBlock IsHitTestVisible="False" Text="Username" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=UsernameBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
<!--PasswordBox-->
<TextBox Grid.Row="1" BorderThickness="0" VerticalContentAlignment="Center" HorizontalContentAlignment="Center" FontFamily="Arial" FontWeight="Bold" FontSize="14" x:Name="passwordBox" Margin="5"/>
<TextBlock Grid.Row="1" IsHitTestVisible="False" Text="password" VerticalAlignment="Center" HorizontalAlignment="Center" Margin="10,0,0,0" FontFamily="Arial" FontWeight="Bold" FontSize="14" Foreground="Black">
<TextBlock.Style>
<Style TargetType="{x:Type TextBlock}">
<Setter Property="Visibility" Value="Collapsed"/>
<Style.Triggers>
<DataTrigger Binding="{Binding Text, ElementName=passwordBox}" Value="">
<Setter Property="Visibility" Value="Visible"/>
</DataTrigger>
</Style.Triggers>
</Style>
</TextBlock.Style>
</TextBlock>
</Grid>
<!--Next Button-->
<Button Content="Next"
HorizontalAlignment="Center"
FontWeight="Bold"
FontSize="14"
BorderThickness="0"
FontFamily="Goudy Stout"
Background="Transparent"
Padding="20 10"
Margin="0 10"
x:Name="NextButton"
Click="NextButton_Click"/>
</StackPanel>
</Border>
<!--Border for PreRegistered account-->
<Border Background="WhiteSmoke"
Opacity="0.4"
CornerRadius="50"
Padding="0"
Width="400"
Height="auto"
Margin="0 12.5 0 0">
<!--Already registered button-->
<Button Content="I already have an account"
HorizontalAlignment="Center"
Opacity="0.8"
FontSize="13"
BorderThickness="0"
FontFamily="Goudy Stout"
Background="Transparent"
Foreground="Black"
x:Name="alreadyRegBtn"
Padding="0 10"
Margin="0 5 0 5"/>
</Border>
</StackPanel>
How do I go about doing this solution where I can change between user controls on the same window, Ofcourse after the thank you screen I will be using the same logic to go to "Sign In!" an so on...
When i'm not using Prism or Dependency Injection then I normally use the View Model first approach.
In this scenario we have a property on our Windows ViewModel that is a class that the other UserControls ViewModels inherit from, normally just use a ViewModelBase class that has the implimentation of INotifyPropertyChanged:
private ViewModelBase currentViewModel;
public ViewModelBase CurrentViewModel
{
get { return currentViewModel; }
set { currentViewModel = value; NotifyPropertyChanged(); }
}
Now inside of your MainWindow like #Tomtom said you have a ContentControl bound to that property. This means that using DataTemplates You can have a different View display depending on which ViewModel type is currently on that property.
<Window.Resources>
<DataTemplate DataType="{x:Type viewmodels:ViewModel1}">
<views:View1/>
</DataTemplate>
<DataTemplate DataType="{x:Type viewmodels:ViewModel2}">
<views:View2/>
</DataTemplate>
</Window.Resources>
<ContentControl Content="{Binding CurrentViewModel}"/>
With this in place all you need to do is have some logic that changes the ViewModel on the MainWindow ViewModel and the View will update to display the correct View for that ViewModel.
Edit: One thing to note is there are lots of different ways people use to achieve what you want, none of them are really right or wrong but they all suit different peoples needs and coding styles.
I've answered a similar question a while ago.
See this post
You can create a ContentControl in your Window and switch the bound UserControl where the user clicks or something else
I have a simple dialog - A Grid with 4 TextBlock's wherein I bind the visibility of the 2nd and 3rd TextBlock to a property but it doesn't work as expected i.e., the conditional message appears truncated when viewing the dialog. The 2 variants of the dialog are as below:
Some Text
Conditional Message 1
B C
or
Some Text
Conditional Message 2
B C
The XAML of the dialog is as attached below.
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:cl="http://www.caliburnproject.org"
xmlns:local="clr-namespace:ABC.DrillDown"
xmlns:iwpf="clr-namespace:ABC.Mvvm.Wpf;assembly=ABC.Mvvm.Wpf"
xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="ABC.DrillDown.Views.MessageView"
Title="{Binding WindowTitle}" WindowStartupLocation="CenterScreen" MaxWidth="525" MinWidth="525" Background="White" MinHeight="275" MaxHeight="275">
<Window.Resources>
<iwpf:BoolToVisibilityConverter x:Key="booleanToVisibilityConverter"/>
</Window.Resources>
<Grid Margin="0,0,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="514" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="64"/>
<RowDefinition Height="{Binding TransactionsModified, Converter={StaticResource booleanToVisibilityConverter}}">
<RowDefinition.Style>
<Style TargetType="{x:Type RowDefinition}">
<Setter Property="Height" Value="Auto" />
<Style.Triggers>
<!--Hide Row-1-->
<DataTrigger Binding="{Binding TransactionsModified}" Value="False">
<Setter Property="Height" Value="0" />
</DataTrigger>
</Style.Triggers>
</Style>
</RowDefinition.Style>
</RowDefinition>
<RowDefinition Height="{Binding TransactionsDeleted, Converter={StaticResource booleanToVisibilityConverter}}">
<RowDefinition.Style>
<Style TargetType="{x:Type RowDefinition}">
<Setter Property="Height" Value="Auto" />
<Style.Triggers>
<!--Hide Row-2-->
<DataTrigger Binding="{Binding TransactionsDeleted}" Value="false">
<Setter Property="Height" Value="0" />
</DataTrigger>
</Style.Triggers>
</Style>
</RowDefinition.Style>
</RowDefinition>
<RowDefinition Height="Auto" MinHeight="80"/>
<RowDefinition Height="Auto" MinHeight="30"/>
<RowDefinition Height="Auto" MinHeight="12"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="0" Grid.Column="0" TextWrapping="NoWrap" HorizontalAlignment="Left" xml:space="preserve" VerticalAlignment="Top" Height="64" Width="478">Some Text </TextBlock>
<TextBlock Grid.Row="1" Grid.Column="0" Text="{Binding TransactionsModified}" Visibility="{Binding TransactionsModified, Converter={StaticResource booleanToVisibilityConverter}}" TextWrapping="NoWrap" HorizontalAlignment="Left" xml:space="preserve" Width="0" >
Conditional Text - 1
</TextBlock>
<TextBlock Grid.Row="2" Grid.Column="0" Text="{Binding TransactionsDeleted}" Visibility="{Binding TransactionsDeleted, Converter={StaticResource booleanToVisibilityConverter}}" TextWrapping="NoWrap" HorizontalAlignment="Left" xml:space="preserve" Width="0">
Conditional Text - 2
</TextBlock>
<TextBlock Grid.Row="3" Grid.Column="0" TextWrapping="NoWrap" HorizontalAlignment="Left" xml:space="preserve" Width="425">
Text 3
Text 4
</TextBlock>
</Grid>
</Window>
C
You have a couple of RowDefinition where there is a wrong Height (you should remove this part)
Height="{Binding TransactionsModified, Converter={StaticResource booleanToVisibilityConverter}}">
Of course binding Height directly to a bool makes no sense: you already have the more reasonable triggers in the following part (they look fine at first sight)
Edit : I realized what the problem is, when I add the border, The second TextBlock sits on top of the first TextBlock. Still have to figure out why this is happening.
Original question:
I have a number of TextBlocks in my xaml. I want to add a border around some textblocks. I tried the following methods.
Method 1:
<Style x:Key="BorderForTextBlock" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
</Style>
<TextBlock1../>
<Border Style="{StaticResource BorderForTextBlock}">
<TextBlock2.../>
</Border>
Method 2:
<TextBlock1../> //This is where the border is added.
<Border BorderThickness="1" BorderBrush="Black">
<TextBlock2 ..../> //This is where I want to add the border
</Border>
A border is added only to the first TextBlock in the xaml no matter to which TextBlock I add the border. I don't want the border on the first TextBlock. I have no clue why this is happening.
This is my xaml :
<Grid Background="LightYellow" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" ></ColumnDefinition>
<ColumnDefinition Width="3.5*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="28*" ></RowDefinition>
<RowDefinition Height="120*" ></RowDefinition>
<RowDefinition Height="28*"></RowDefinition>
<RowDefinition Height="74*"></RowDefinition>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Margin="10,0,5,0" FontWeight="SemiBold" Text="{x:Static res:Resources.source1"/>
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock x:Name="txtBlock1" FormatTest:FormattedTextBehavior.FormattedText="{Binding Path= content1}" Margin="0,0,0,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap"/>
</Border>
<TextBlock Grid.Row="1" Margin="10,0,5,0" FontWeight="SemiBold" Text="{x:Static res:Resources.source2}"/>
<RichTextBox Background="LightYellow" Margin="0,0,0,0" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" Grid.Row="1" Grid.Column="1" IsReadOnly="True" >
<FlowDocument>
<Paragraph>
<Run Text="{Binding content2, Mode=TwoWay}"/>
</Paragraph>
</FlowDocument>
</RichTextBox>
<TextBlock Grid.Row="2" Margin="10,0,5,0" FontWeight="SemiBold" Text="{x:Static res:Resources.source3"/>
<TextBlock Text="{Binding content3, Mode=TwoWay}" Margin="0,0,0,0" Grid.Row="2" Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto" ScrollViewer.CanContentScroll="True" TextWrapping="Wrap"/>
<TextBlock Grid.Row="3" Margin="10,0,5,0" FontWeight="SemiBold" Text="{x:Static res:Resources.source4}"/>
<TextBox Text="{Binding content4, Mode=TwoWay}" Margin="0,0,0,0" Grid.Row="3" Grid.Column="1" ScrollViewer.HorizontalScrollBarVisibility="Auto" ScrollViewer.VerticalScrollBarVisibility="Auto"
ScrollViewer.CanContentScroll="True" TextAlignment="Left" TextWrapping="Wrap" Background="LightYellow" IsReadOnly="True"/>
</Grid>
instead of
<Border BorderBrush="Black" BorderThickness="1">
<TextBlock x:Name="txtBlock1" FormatTest:FormattedTextBehavior.FormattedText="{Binding Path= content1}" Margin="0,0,0,0" Grid.Row="0" Grid.Column="1" TextWrapping="Wrap"/>
</Border>
Have
<Border Grid.Row="0" Grid.Column="1" BorderBrush="Black" BorderThickness="1">
<TextBlock x:Name="txtBlock1" FormatTest:FormattedTextBehavior.FormattedText="{Binding Path= content1}" Margin="0,0,0,0" TextWrapping="Wrap"/>
</Border>
This should solve the issue with placement of text blocks
This is how it looks at my end
Try this and let us know
You can use style with trigger and put the style either in windows resources or app resources depending upon scope you want
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.Resources>
<Style x:Key="NotCalledBorder" TargetType="{x:Type Border}">
<Setter Property="BorderThickness" Value="1" />
<Setter Property="BorderBrush" Value="Black" />
<Setter Property="Height" Value="20"/>
<Setter Property="Width" Value="30"/>
<Setter Property="HorizontalAlignment" Value="Left"/>
</Style>
<Style TargetType="TextBlock">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextDecorations" Value="Underline" />
</Trigger>
</Style.Triggers>
</Style>
</Grid.Resources>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Style="{StaticResource NotCalledBorder}" Grid.Row="0">
<TextBlock Text="test1" Grid.Row="0" OpacityMask="Black">
</TextBlock>
</Border>
<TextBlock Text="test2" Grid.Row="1"></TextBlock>
<Border Style="{StaticResource NotCalledBorder}" Grid.Row="2">
<TextBlock Text="test3" Grid.Row="2" OpacityMask="Black"></TextBlock>
</Border>
<TextBlock Text="test4" Grid.Row="3"></TextBlock>
</Grid>
</Window>
Conditional style in WPF. Adding border to two textblocks only. You can apply style and add to as many as you want
I've been trying to understand Scrollviewers, and thought I'd take a look at Microsoft's template for a Grid App for 8.1, whose content extends off the screen. What's odd is that there doesn't seem to even be a Scrollviewer in the XAML page. Can anyone tell me what is enabling the scrolling?
<Page
x:Name="pageRoot"
x:Class="GridApp.GroupedItemsPage"
DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:GridApp"
xmlns:data="using:GridApp.Data"
xmlns:common="using:GridApp.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<x:String x:Key="ChevronGlyph"></x:String>
<!--
Collection of grouped items displayed by this page, bound to a subset
of the complete item list because items in groups cannot be virtualized
-->
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Groups}"
IsSourceGrouped="true"
ItemsPath="Items"
d:Source="{Binding Groups, Source={d:DesignData Source=/DataModel/SampleData.json, Type=data:SampleDataSource}}"/>
</Page.Resources>
<!--
This grid acts as a root panel for the page that defines two rows:
* Row 0 contains the back button and page title
* Row 1 contains the rest of the page layout
-->
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.ChildrenTransitions>
<TransitionCollection>
<EntranceThemeTransition/>
</TransitionCollection>
</Grid.ChildrenTransitions>
<Grid.RowDefinitions>
<RowDefinition Height="140"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Horizontal scrolling grid -->
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
Grid.RowSpan="2"
Padding="116,137,40,46"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemTemplate>
<DataTemplate>
<Grid HorizontalAlignment="Left" Width="250" Height="250">
<Border Background="{ThemeResource ListViewItemPlaceholderBackgroundThemeBrush}">
<Image Source="{Binding ImagePath}" Stretch="UniformToFill" AutomationProperties.Name="{Binding Title}"/>
</Border>
<StackPanel VerticalAlignment="Bottom" Background="{ThemeResource ListViewItemOverlayBackgroundThemeBrush}">
<TextBlock Text="{Binding Title}" Foreground="{ThemeResource ListViewItemOverlayForegroundThemeBrush}" Style="{StaticResource TitleTextBlockStyle}" Height="60" Margin="15,0,15,0"/>
<TextBlock Text="{Binding Subtitle}" Foreground="{ThemeResource ListViewItemOverlaySecondaryForegroundThemeBrush}" Style="{StaticResource CaptionTextBlockStyle}" TextWrapping="NoWrap" Margin="15,0,15,10"/>
</StackPanel>
</Grid>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid GroupPadding="0,0,70,0"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.GroupStyle>
<GroupStyle>
<GroupStyle.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,0,2">
<Button Foreground="{ThemeResource ApplicationHeaderForegroundThemeBrush}"
AutomationProperties.Name="Group Title"
Click="Header_Click"
Style="{StaticResource TextBlockButtonStyle}" >
<StackPanel Orientation="Horizontal">
<TextBlock Text="{Binding Title}" Margin="0,-11,10,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
<TextBlock Text="{StaticResource ChevronGlyph}" FontFamily="Segoe UI Symbol" Margin="0,-11,0,10" Style="{StaticResource SubheaderTextBlockStyle}" TextWrapping="NoWrap" />
</StackPanel>
</Button>
</Grid>
</DataTemplate>
</GroupStyle.HeaderTemplate>
</GroupStyle>
</GridView.GroupStyle>
</GridView>
<!-- Back button and page title -->
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Button x:Name="backButton" Margin="39,59,39,0" Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
Style="{StaticResource NavigationBackButtonNormalStyle}"
VerticalAlignment="Top"
AutomationProperties.Name="Back"
AutomationProperties.AutomationId="BackButton"
AutomationProperties.ItemType="Navigation Button"/>
<TextBlock x:Name="pageTitle" Text="{StaticResource AppName}" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1"
IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Bottom" Margin="0,0,30,40"/>
</Grid>
</Grid>
If we go check out the default GridView template and look for the ItemsPresenter we see it's embedded in a ScrollViewer at the template level. Since now we know there's one there, if we look up towards the top in the Setter declarations we've got some Properties available to us to interact with that ScrollViewer from the GridView itself by seeing;
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Auto"/>
<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Disabled"/>
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.ZoomMode" Value="Disabled" />
<Setter Property="ScrollViewer.IsDeferredScrollingEnabled" Value="False" />
<Setter Property="ScrollViewer.BringIntoViewOnFocusChange" Value="True" />
So if we wanted that GridView to not scroll anymore we could tell it not to like;
<GridView ScrollViewer.HorizontalScrollBarVisibility="Disabled"/>
since it's set to "Auto" at the template level by default.
That's the thing about templates, sometimes it just takes digging one level deeper. Hope this helps, cheers.
What I am trying to do is use C# to write the code of ContentTemplate instead of XAML. Here is the XAML code that I have:
<phone:PhoneApplicationPage.Resources>
<DataTemplate x:Key="AnyButton">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="140"/>
<ColumnDefinition Width="310"/>
</Grid.ColumnDefinitions>
<Image Grid.Column="0" Source="/Images/AnyImage.png" Height="80" Width="80" HorizontalAlignment="Left" Margin="15,0,0,0"/>
<TextBlock Grid.Column="1" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Left" Text="AnyText" FontSize="30" FontFamily="{StaticResource PhoneFontFamilySemiLight}" Margin="0,0,0,0"/>
</Grid>
</DataTemplate>
</phone:PhoneApplicationPage.Resources>
And here is the code that I used inside my ContentPanel to use the ContentTemplate:
<Button x:Name="MyButton"
Click="MyButton_Click"
ContentTemplate="{StaticResource AnyButton}"
Width="492" Height="130"
Margin="6,0,6,-6"
Background="#003d0a"/>
Now, my question is, is it possible to write the whole code using C#?
if you are trying to do it in styling purpose do it in the following way:
<Style x:Key="MyButton" TargetType="Button">
<Setter Property="Width" Value="460"></Setter>
<Setter Property="Background" Value="/Images/AnyImage.png"></Setter>
</Style>
define this in app.xaml or PhoneApplicationPage.resources and in your button control in xaml set your style to MyButton. for example:
<Button style={StaticResource MyButton}/>
if you also want to define width and height for your image you can do it same way by defining style in value section set the value with that style. for example:
<style x:key ="MyImage" TargetType="Image">
<setter property="Width" Value="150"/>
</style>
in my button style define background value ={StaticResource MyImage}