Can I access the 'Background' property of a grid that lies inside this control, so that I could override the default image where it is required.
<LocalControls:HeaderedContentControl
Style="{StaticResource MultilineHyperlinkStyle}"
Header="autocompletebox"
Content="Completion of text based on items"
/>
The default image is defined here in this Style.
<Style TargetType="LocalControls:HeaderedContentControl">
<Setter Property="HorizontalContentAlignment" Value="Left"/>
<Setter Property="VerticalContentAlignment" Value="Top"/>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="LocalControls:HeaderedContentControl">
<Grid>
<Grid.Background>
<!-- ::: DEFAULT IMAGE ::: -->
<ImageBrush ImageSource="/eSurveyWin7;component/Images/50x50.png" />
</Grid.Background>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" MinWidth="50"/>
<ColumnDefinition Width="Auto" MinWidth="173"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ContentPresenter
Grid.Column="1"
Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
Cursor="{TemplateBinding Cursor}"
Margin="{TemplateBinding Padding}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"/>
<ContentPresenter
Grid.Column="1"
Grid.Row="1"
Content="{TemplateBinding Content}"
ContentTemplate="{TemplateBinding ContentTemplate}"
Cursor="{TemplateBinding Cursor}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
I only want to modify the first snippet.
Related
I have a list view which has a header template
<Grid Margin="70,0,0,0">
<ListView x:Name="LanguagesListView" DataContext="{x:Bind ViewModel}" Grid.Row="2" Style="{StaticResource LanguagesListViewStyle}" ItemsSource="{x:Bind ViewModel.Languages}" SelectedItem="{x:Bind ViewModel.SelectedLanguage, Mode=TwoWay}" HorizontalAlignment="Stretch" >
<ListView.HeaderTemplate>
<DataTemplate>
<Grid Margin="0,0,70,0" >
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Strings.ui_language_setting}" Style="{ThemeResource H1TextBlockStyle}" TextTrimming="CharacterEllipsis" TextWrapping="WrapWholeWords"/>
<TextBlock Grid.Row="1" Text="{Binding Strings.ui_language_copy}" Style="{ThemeResource BodyTitleTextBlockStyle}" Foreground="{StaticResource Gray9Brush}" TextWrapping="WrapWholeWords" HorizontalAlignment="Left" Margin="0,10,0,30" TextTrimming="CharacterEllipsis"/>
</Grid>
</DataTemplate>
</ListView.HeaderTemplate>
</ListView>
</Grid>
and the style for the list view is
<Style x:Key="LanguagesListViewStyle" TargetType="ListView">
<Setter Property="TabNavigation" Value="Local" />
<Setter Property="Padding" Value="0,0,50,55" />
<Setter Property="IsItemClickEnabled" Value="True" />
<Setter Property="ItemContainerStyle" Value="{StaticResource LanguagesListViewItemContainerStyle}" />
<Setter Property="ItemTemplate" Value="{StaticResource LanguagesListViewItemTemplate}" />
<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
<Setter Property="ScrollViewer.HorizontalScrollMode" Value="Disabled" />
<Setter Property="ScrollViewer.VerticalScrollMode" Value="Enabled" />
<Setter Property="ScrollViewer.IsHorizontalRailEnabled" Value="False" />
<Setter Property="ScrollViewer.IsHorizontalScrollChainingEnabled" Value="False" />
<Setter Property="ScrollViewer.IsVerticalRailEnabled" Value="True" />
<Setter Property="ScrollViewer.IsVerticalScrollChainingEnabled" Value="True" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListView">
<Border BorderBrush="{TemplateBinding BorderBrush}"
Background="{TemplateBinding Background}"
BorderThickness="{TemplateBinding BorderThickness}">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition/>
</Grid.RowDefinitions>
<ContentControl Content="{TemplateBinding Header}"
ContentTemplate="{TemplateBinding HeaderTemplate}"
ContentTransitions="{TemplateBinding HeaderTransitions}"/>
<ScrollViewer x:Name="ScrollViewer"
Grid.Row="1"
TabNavigation="{TemplateBinding TabNavigation}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
AutomationProperties.AccessibilityView="Raw">
<ItemsPresenter
Footer="{TemplateBinding Footer}"
FooterTemplate="{TemplateBinding FooterTemplate}"
FooterTransitions="{TemplateBinding FooterTransitions}"
Padding="{TemplateBinding Padding}" />
</ScrollViewer>
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
My aim is to make the Header of the list view sticky which works but I would like to have the scroll viewer of the list view to span across the header area as well. Currently the scroll bar appears below the header.
I would like to get the scroll viewer to the top right, still keeping the header sticky.
Any helps appreciated.
I found an alternate solution for this. Basically keeping the header out of the list view header and move it to a Grid with 2 rows. Header content and the list view will be in the same row and keeping a padding for the list view to keep the list view below the Header. use a ListViewClipBehavior to fix the scrolling issue.
<Grid Margin="70,0,0,0">
<Grid Margin="0,58,70,0">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{x:Bind Strings.ui_language_setting}" Style="{ThemeResource H1TextBlockStyle}" TextTrimming="CharacterEllipsis" TextWrapping="WrapWholeWords"/>
<TextBlock Grid.Row="1" Text="{x:Bind Strings.ui_language_copy}" Style="{ThemeResource BodyTitleTextBlockStyle}" Foreground="{StaticResource Gray9Brush}" TextWrapping="WrapWholeWords" HorizontalAlignment="Left" Margin="0,10,0,0" TextTrimming="CharacterEllipsis"/>
</Grid>
<ListView x:Name="LanguagesListView" Style="{StaticResource LanguagesListViewStyle}" ItemsSource="{x:Bind ViewModel.Languages}" SelectedItem="{x:Bind ViewModel.SelectedLanguage, Mode=TwoWay}" HorizontalAlignment="Stretch" Padding="0,160,0,0" Margin="0,0,0,0">
<interactivity:Interaction.Behaviors>
<behaviors:ListViewClipBehavior Padding="0,160,0,0" />
<interactivity:Interaction.Behaviors>
</ListView>
</grid>
making the XAML list view header sticky with full scroll bar
The problem is you have placed the header out of the ScrollViewer, it could make the header sticky but the scroll bar will not full.
You have many ways to make sticky header, derive from your screenshot. it looks contain only one group. please check Windows Community Toolkit ScrollHeader, and use StickyHeaderBehavior directly.
For example
<ListView Name="listView">
<interactivity:Interaction.Behaviors>
<behaviors:StickyHeaderBehavior />
</interactivity:Interaction.Behaviors>
<ListView.Header>
<Grid MinHeight="100" Background="#FF0078D7">
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center" Text="Sample Text"/>
</Grid>
</ListView.Header>
<ListView.ItemTemplate>
<DataTemplate x:DataType="x:String">
<Grid MinHeight="25" Margin="10">
<TextBlock Text="{Binding}" VerticalAlignment="Center" />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
<ListView.Items>
<x:String>One</x:String>
<x:String>Two</x:String>
<x:String>Three</x:String>
<x:String>Four</x:String>
<x:String>Five</x:String>
<x:String>Six</x:String>
<x:String>Seven</x:String>
<x:String>Eight</x:String>
<x:String>Nine</x:String>
<x:String>Ten</x:String>
<x:String>Eleven</x:String>
<x:String>Twelve</x:String>
<x:String>Thirteen</x:String>
<x:String>Fourteen</x:String>
<x:String>Fifteen</x:String>
<x:String>Sixteen</x:String>
<x:String>Seventeen</x:String>
<x:String>Eighteen</x:String>
<x:String>Nineteen</x:String>
<x:String>Twenty</x:String>
</ListView.Items>
</ListView>
I've added a
ToggleMenuFlyoutItem Text="Sales Tax Exempt" Click="btnTaxExempt_Click"
and instead of the check mark when on and the no check mark when off, I want to change the Text to read "Tax Exempt On" or "Tax Exempt Off". How do I do this?
You could update the ToggleMenuFlyoutItem styles and templates to hide the CheckGlyph FontIcon to Collapsed and update the text code behind as you want. For example:
XAML
<Style x:Key="ToggleMenuFlyoutItemStyle1" TargetType="ToggleMenuFlyoutItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ToggleMenuFlyoutItem">
<Grid x:Name="LayoutRoot" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}">
<VisualStateManager.VisualStateGroups>
...
</VisualStateManager.VisualStateGroups>
<Grid x:Name="AnimationRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<FontIcon x:Name="CheckGlyph" Visibility="Collapsed" Foreground="{ThemeResource ToggleMenuFlyoutItemCheckGlyphForeground}" FontSize="16" FontFamily="{ThemeResource SymbolThemeFontFamily}" Glyph="" Margin="0,0,12,0" Opacity="0" Width="16"/>
<TextBlock x:Name="TextBlock" Grid.Column="1" Foreground="{TemplateBinding Foreground}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Text="{TemplateBinding Text}" TextTrimming="Clip" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<ToggleMenuFlyoutItem Text="Sales Tax Exempt" Click="btnTaxExempt_Click" Style="{StaticResource ToggleMenuFlyoutItemStyle1}" ></ToggleMenuFlyoutItem>
Code behind:
private void btnTaxExempt_Click(object sender, RoutedEventArgs e)
{
ToggleMenuFlyoutItem current = sender as ToggleMenuFlyoutItem;
if(current.IsChecked)
{
current.Text = "Tax Exempt On";
}
else if(!current.IsChecked)
{
current.Text = "Tax Exempt Off";
}
}
The ToggleMenuFlyoutItem should be used inside MenuFlyout, if you are not use a MenuFlyout, you may consider to use ToggleSwitch instead. ToggleSwitch is easy to set OnContent and OffContent .
I want to do a data binding in a Style(ControlTemplate) in a ListView
My ListView looks like:
<ListView ItemTemplateSelector="{StaticResource ItemTemplate_Selector}" ItemContainerStyleSelector="{StaticResource ItemContainerStyle_Selector}"/>
Most of properties fetched from ItemsSource are binding in the DataTemplate:
e.g.
<DataTemplate x:Key="OneOfItem">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Name}"/>
<StackPanel Grid.Row="1">
<RichTextBlock Grid.Column="0" local:HyperlinkExtensions.Text="{Binding Message}"/>
<TextBlock Grid.Column="1" Text="{Binding Time}"/>
</StackPanel>
</Grid>
</DataTemplate>
For the reason that there's a area that will be affected by different visual state and there's a property displayed in that area, so I have to binding it in the ItemContainerStyle like:
e.g.
<Style x:Key="HeadPicStyle" TargetType="ListViewItem">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="Header" Width="20"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Grid Grid.Column="0">
<TextBlock x:Name="HeaderText" Text="{Binding Header}"/>
</Grid>
<ContentPresenter Grid.Column="1" x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" ContentTransitions="{TemplateBinding ContentTransitions}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
</Grid>
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="AdaptiveStatesTest">
<VisualState x:Name="DefaultStateTest">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource WideStateChangeThreshold}" />
</VisualState.StateTriggers>
</VisualState>
<VisualState x:Name="NarrowStateTest">
<VisualState.StateTriggers>
<AdaptiveTrigger MinWindowWidth="{StaticResource NarrowStateWindowWidth}" />
</VisualState.StateTriggers>
<VisualState.Setters>
<Setter Target="Header.Width" Value="100"/>
</VisualState.Setters>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
On my perspective, the itemContainerStyle is targeted to the itemSource in the ListView, so I can access it's property (means I can directly binding the property name)
However, the HeaderText's text can not be seen in the app.
I'm wondering if my binding in the style is wrong or not?
i have a pivot control and i'm wanting to change the style of the unselected pivots. in particular, I want to change the opacity.
I know it has something to do with Primitives:PivotHeadersControl, but I can't figure out what to set on the style for this control.
I have the following style for my pivot
</Grid>
</ItemsPanelTemplate>
</Setter.Value>
</Setter>
<Setter Property="HeaderTemplate">
<Setter.Value>
<DataTemplate>
<Grid Background="{StaticResource TabHeaderBackgroundBrush}" >
<Border BorderBrush="White" BorderThickness="1">
<TextBlock Text="{Binding}" FontSize="28" Margin="15,0,15,0"
Foreground="{StaticResource ForegroundBrush}"/>
</Border>
</Grid>
</DataTemplate>
</Setter.Value>
</Setter>
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Controls:Pivot">
<Grid HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
VerticalAlignment="{TemplateBinding VerticalAlignment}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Background="Transparent" CacheMode="BitmapCache" Grid.RowSpan="2" />
<Grid Background="{TemplateBinding Background}" CacheMode="BitmapCache"
Grid.Row="2" />
<ContentPresenter ContentTemplate="{TemplateBinding TitleTemplate}"
Content="{TemplateBinding Title}" Margin="24,17,0,-7"/>
<Primitives:PivotHeadersControl x:Name="HeadersListElement"
Grid.Row="1" >
</Primitives:PivotHeadersControl>
<Border Margin="0,-1,0,0" BorderBrush="White"
BorderThickness="1" Grid.Row="2"
Background="{StaticResource TabBackgroundBrush}">
<ItemsPresenter x:Name="PivotItemPresenter"
Margin="0"/>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
In metro style windows 8 application, how can i display the data using xaml similar to this (https://dl.dropbox.com/u/59251888/img.png)image. is it possible using ListBox,ListView,GrdView.. ?
Yes, but you need to style it up so that it looks like a datagrid. (Assuming you are developing in XAML based on the tags you've assigned to this question). The trick is to make a data template that uses a Grid with columns with proper widths, alignments etc.
I've done something similar - using a ListView. This could be modified to make the backgrounds appear only for cells as opposed to rows - which I have done. Hope this helps:
XAML:
<ListView
VerticalAlignment="Top"
Margin="0,5"
ItemsSource="{Binding HighestExpensesAlternatingList}"
ItemTemplate="{StaticResource HighestExpensesTemplate}"
BorderBrush="#19FFFFFF" BorderThickness="1,0,0,0"
SelectionMode="None" IsItemClickEnabled="False"
ScrollViewer.VerticalScrollBarVisibility="Hidden"
ScrollViewer.HorizontalScrollBarVisibility="Hidden"
ItemContainerStyle="{StaticResource SimpleListViewItemStyle}"
IsHitTestVisible="False"/>
<DataTemplate x:Key="HighestExpensesTemplate">
<Grid Width="500" VerticalAlignment="Center" Margin="5,0"
Background="{Binding AlternatingIndexBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="120" />
<ColumnDefinition Width="*" />
<ColumnDefinition Width="150" />
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.DateString}" />
<TextBlock Grid.Column="1" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.Description}" />
<TextBlock Grid.Column="2" Margin="5" TextWrapping="NoWrap"
Style="{StaticResource BasicTextStyle}"
VerticalAlignment="Center"
Text="{Binding Item.AmountStringCurrencyFormat}"
HorizontalAlignment="Right"/>
</Grid>
</DataTemplate>
<Style x:Key="SimpleListViewItemStyle" TargetType="ListViewItem">
<Setter Property="Background" Value="Transparent"/>
<Setter Property="TabNavigation" Value="Local"/>
<Setter Property="IsHoldingEnabled" Value="False"/>
<Setter Property="IsDoubleTapEnabled" Value="False"/>
<Setter Property="IsRightTapEnabled" Value="False" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ListViewItem">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}"
Margin="{TemplateBinding Margin}">
<VisualStateManager.VisualStateGroups>
<VisualStateGroup x:Name="CommonStates">
<VisualState x:Name="Normal"/>
<VisualState x:Name="Pressed">
<Storyboard>
<PointerDownThemeAnimation TargetName="Container"/>
</Storyboard>
</VisualState>
</VisualStateGroup>
</VisualStateManager.VisualStateGroups>
<Grid x:Name="Container">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
ContentTransitions="{TemplateBinding ContentTransitions}"
Content="{TemplateBinding Content}"
HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
Margin="{TemplateBinding Padding}"
VerticalAlignment="{TemplateBinding VerticalContentAlignment}" />
</Grid>
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>