I develop Win8.1 universal app.
I'm using GridView with WrapGrid as ItemsPanel inside. Verticall scrolling is disabled, user needs to scroll horizontally only. I'm using incremental source collection as ItemsSource and when user scrolls right to the end of the GridView, new items are dynamically added. Everything works fine, except one thing. I want to make a progress indicator right-aligned and it must become visible when new page is loading. I try to set footer template for grid view, but it is hidden (bc maybe by default footer is added below the itemspanel or whatever).
Here is the code i use to define control template for GridView and put Footer right.
<GridView.Template>
<ControlTemplate TargetType="GridView">
<Border BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}"
Background="{TemplateBinding Background}">
<ScrollViewer x:Name="ScrollViewer"
AutomationProperties.AccessibilityView="Raw"
BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}"
HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}"
HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}"
IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}"
IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}"
IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}"
IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}"
IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}"
TabNavigation="{TemplateBinding TabNavigation}"
VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}"
VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}"
ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
<StackPanel Orientation="Horizontal">
<ItemsPresenter HeaderTemplate="{TemplateBinding HeaderTemplate}"
Header="{TemplateBinding Header}"
HeaderTransitions="{TemplateBinding HeaderTransitions}"
Padding="{TemplateBinding Padding}"/>
<ContentControl Transitions="{TemplateBinding FooterTransitions}"
ContentTemplate="{TemplateBinding FooterTemplate}"
Content="{TemplateBinding Footer}"/>
</StackPanel>
</ScrollViewer>
</Border>
</ControlTemplate>
</GridView.Template>
Then i set ProgressRing as footer template.
<GridView.FooterTemplate>
<DataTemplate>
<ProgressRing VerticalAlignment="Stretch"
HorizontalAlignment="Stretch"
IsActive="{Binding IsBusy}"
Margin="0,24"
Width="50"
Height="50"
Foreground="{StaticResource LightGreyBorderBrush}"
Style="{StaticResource ProgressRingStyle}" />
</DataTemplate>
</GridView.FooterTemplate>
But when i try to scroll - the things are going crazy. GridView always calls next page loading one after another, but the scroll position is nearly 0 (in the beginning of the GridView). So i get the infinite page loading.
Can anyone help me with this? Many thanks in advance!
EDIT: I've created a small sample to reproduce. Please take a look. Here is the link.
Right aligned FooterTemplate is supported out of the box. Just use ItemsWrapGrid (it's used in GridView by default) instead of WrapGrid as ItemsPanel. You also don't need to redefine Template. Here is working code from your example:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<GridView x:Name="TestGridView">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid ItemHeight="100"
Orientation="Vertical"
MaximumRowsOrColumns="5" />
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate>
<Border Background="DarkSlateGray"
Height="100"
Width="100"
Margin="20">
<TextBlock Foreground="#FFFFFF"
Text="{Binding Number}" />
</Border>
</DataTemplate>
</GridView.ItemTemplate>
<GridView.FooterTemplate>
<DataTemplate>
<ProgressRing IsActive="True"
Margin="0,24"
Width="50"
Height="50" />
</DataTemplate>
</GridView.FooterTemplate>
</GridView>
</Grid>
Please note that 2 pages are loaded each time you scroll to the right as GridView thinks one page is not enough.
Hope this helps.
Related
I'm writing a ControlTemplate for toolbars that utilizes a UniformGrid in order to provide multiple columns for toolbar items. So far, it seems that even with mostly default ControlTemplate markup (a la MSDN Documentation), Overflow into the ToolBarOverflowPanel no longer works. I have tried using both the default ToolBarOverflowPanel and a StackPanel, to no effect; the relevant template snippit can be found here.
How do I get Overflow to work properly?
Additionally, when placing a ToolBar control inside a ToolBarTray, how can I detect and set the "Thumb", "Content", and "Overflow Toggle Button" to their correct positions? The documentation for ToolBar ControlTemplates does not seem to cover this.
edit: Also something I'm curious about, how can I tie into the UniformGrid's Column property in my Main window xaml?
edit 2: Got the basic for dealing with ToolBarTray Orientation resolved, just needed to add ControlTemplate triggers for the related attached properties (Trigger Property="ToolBarTray.Orientation" Value="Vertical"). Also, who downvotes a decently written question, seriously?
<ToggleButton DockPanel.Dock="Right"
ClickMode="Press"
IsChecked="{Binding
IsOverflowOpen,
Mode=TwoWay,
RelativeSource={RelativeSource TemplatedParent}
}"
IsEnabled="{TemplateBinding HasOverflowItems}"
>
<ToggleButton.Template>
<ControlTemplate TargetType="{x:Type ToggleButton}">
<Border x:Name="Border"
Background="{StaticResource
{x:Static SystemColors.MenuBarBrushKey}
}"
CornerRadius="0,3,3,0"
SnapsToDevicePixels="true"
>
<Grid>
<Path x:Name="Arrow"
Data="M -0.5 3 L 5.5 3 L 2.5 6 Z"
Fill="{StaticResource {x:Static
SystemColors.ControlTextBrushKey
}}"
Margin="2,3"
VerticalAlignment="Bottom"
/>
<ContentPresenter />
</Grid>
</Border>
</ControlTemplate>
</ToggleButton.Template>
<Popup x:Name="OverflowPopup"
AllowsTransparency="true"
Focusable="false"
IsOpen="{Binding
IsOverflowOpen,
RelativeSource={RelativeSource TemplatedParent}
}"
Placement="Bottom"
PopupAnimation="Slide"
StaysOpen="false"
>
<Border x:Name="DropDownBorder"
Background="{StaticResource
{x:Static SystemColors.MenuBarBrushKey}
}"
BorderBrush="{StaticResource
{x:Static SystemColors.ControlDarkBrushKey}
}"
BorderThickness="1"
>
<StackPanel x:Name="PART_ToolBarOverflowPanel"
Focusable="true"
FocusVisualStyle="{x:Null}"
KeyboardNavigation.TabNavigation="Cycle"
KeyboardNavigation.DirectionalNavigation="Cycle"
Margin="2"
/>
<!--<ToolBarOverflowPanel
x:Name="PART_ToolBarOverflowPanel"
Focusable="true"
FocusVisualStyle="{x:Null}"
KeyboardNavigation.TabNavigation="Cycle"
KeyboardNavigation.DirectionalNavigation="Cycle"
Margin="2"
WrapWidth="200"
/>-->
</Border>
</Popup>
</ToggleButton>
I want to include an image directly into a ComboBox template.
I found this part of the code and I believe it is here where I would put it:
<Button x:Name="FlyoutButton" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" FontWeight="Normal" FlowDirection="{TemplateBinding FlowDirection}" FontSize="{ThemeResource ContentControlFontSize}" HorizontalAlignment="Stretch" HorizontalContentAlignment="Left" MinHeight="{ThemeResource ComboBoxItemMinHeightThemeSize}" Padding="6.5,0,0,0" Grid.Row="1">
<ContentPresenter x:Name="ContentPresenter" Margin="0,0.8,0,0" MinHeight="32.5">
<TextBlock x:Name="PlaceholderTextBlock" Margin="0" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}" Text="{TemplateBinding PlaceholderText}"/>
</ContentPresenter>
</Button>
I can't put an Image inside contentPresenter because it says I can only set 'Content' once.
If I make something like:
<ContentPresenter x:Name="ContentPresenter" Margin="0,0.8,0,0" MinHeight="32.5">
<StackPanel Orientation="Horizontal">
<TextBlock x:Name="PlaceholderTextBlock" Margin="0" Style="{StaticResource ComboBoxPlaceholderTextBlockStyle}" Text="{TemplateBinding PlaceholderText}"/>
<Image Source="ms-appx:///Assets/Arrow.png" />
</StackPanel>
</ContentPresenter>
It actually works but I get an error in my XAML view page: "No installed components were detected. Cannot resolve TargetName PlaceholderTextlock.". And also the image disappears after I select an item.
I'd appreciate some guidance.
I believe you want to set the items inside the combo box to have the image with the textblock. In that case you need to set the ItemTemplate of the combobox like this
<ComboBox Name="hik" ItemTemplate="{StaticResource cmbx}">
And in your page resources you can define the item template for combo box items like this
<DataTemplate x:Key="cmbx">
<StackPanel Orientation="Horizontal" Background="Aqua">
<TextBlock HorizontalAlignment="Left" Margin="0,0,0,0" Foreground="Black" TextWrapping="Wrap" Text="Some Text" VerticalAlignment="Top"/>
<Image Source="/Assets/1.png" Stretch="Uniform" Height="100" Width="100" />
</StackPanel>
</DataTemplate>
Once that is done when you run it on clicking the combobox you can see the list with image
Hope this helps!
I've got a text box (which I've made changes to by editing the template). I added a Scrollviewer to the border of the content element so that I have a horizontal scroll ability, just like the address bar text box in IE.
Now that I've added the ScrollViewer, when I select the text inside the text box the cursor is positioned incorrectly. A better way to illustrate this is below:
My XAML is:
<ScrollViewer Margin="{StaticResource PhoneTouchTargetOverhang}" Width="Auto" BorderThickness="3" HorizontalScrollBarVisibility="Hidden">
<Border BorderBrush="Transparent" BorderThickness="{TemplateBinding BorderThickness}" Background="Transparent" Height="48" Width="Auto">
<ContentControl x:Name="ContentElement" BorderThickness="0" HorizontalContentAlignment="Stretch" Margin="{StaticResource PhoneTextBoxInnerMargin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch" Style="{StaticResource ContentControlStyle1}"/>
</Border>
</ScrollViewer>
Basically that's it! all I added was that ScrollViewer and the error occurs. What can I do to solve this?
Thanks!
Try giving the ScrollViewer a fixed height
I have two templates, one for a textbox and one for a listview, both are just used to give them rounded corners instead of the default rectangle. My textbox needed the "ScrollViewer x:Name="PART_ContentHost" line in order to show text, but that doens't work for the listview. If I take out the Template for the listview the example listviewitem (stuff) will show up. Otherwise it won't and I can't see any other items I add in the code behind. What am I missing in the xaml to get this to work?
Here is my xaml below:
<!-- Design Templates to set the borders of the controls-->
<UserControl.Resources>
<ControlTemplate x:Key="TextBoxTemplate" TargetType="TextBox">
<Border BorderBrush="Black" BorderThickness="1,1,1,.5" CornerRadius="7">
<ScrollViewer x:Name="PART_ContentHost" ></ScrollViewer>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="ListViewTemplate" TargetType="ListView">
<Border BorderBrush="Black" BorderThickness=".5,1,1,1" CornerRadius="7">
</Border>
</ControlTemplate>
</UserControl.Resources>
<!-- Controls -->
<Grid Height="270" Width="400">
<StackPanel Width="390">
<TextBox Height="35" Name="InputTextbox" Template="{StaticResource TextBoxTemplate}" VerticalContentAlignment="Center" TextChanged="InputTextbox_TextChanged"></TextBox>
<ListView Height="235" Name="ResultsListView" Template="{StaticResource ListViewTemplate}" SelectionChanged="ResultsListView_SelectionChanged">
<ListViewItem Content="stuff"></ListViewItem>
</ListView>
</StackPanel>
</Grid>
Your ControlTemplate doesn't have a presenter associated with it. This is why you're not seeing any items. See this page for a working example of how to create a ListView.ControlTemplate:
MSDN: ListView ControlTemplate Example
and here's an updated xaml for your control template:
<ControlTemplate x:Key="ListViewTemplate" TargetType="ListView">
<Border BorderBrush="Black" BorderThickness=".5,1,1,1" CornerRadius="7">
<ScrollViewer>
<ItemsPresenter />
</ScrollViewer>
</Border>
</ControlTemplate>
I have the following XAML code, which displays a picture (image inside borders) and a logo. Right now, the logo appears below the picture. This is expected, however my goal is to have the logo on top of the picture (precisely at the bottom-right corner). Does someone has an idea how to do that? Do we have layers in WPF?
Note: I absolutely need to keep the WrapPanel.
<WrapPanel>
<Border BorderBrush="Gray" BorderThickness="1" Margin="3">
<Border BorderBrush="White" BorderThickness="3">
<Border BorderBrush="LightGray" BorderThickness="0.5">
<Image Source="http://farm1.static.flickr.com/2/1703693_687c42c89f_s.jpg" Stretch="Uniform" />
</Border>
</Border>
</Border>
<Image Source="http://l.yimg.com/g/images/flickr_logo_gamma.gif.v59899.14" Height="10" />
</WrapPanel>
You should be able to do something along the lines of:
<WrapPanel>
<Grid>
<Border BorderBrush="Gray" BorderThickness="1" Margin="3">
<Border BorderBrush="White" BorderThickness="3">
<Border BorderBrush="LightGray" BorderThickness="0.5">
<Image Source="http://farm1.static.flickr.com/2/1703693_687c42c89f_s.jpg" Stretch="Uniform" />
</Border>
</Border>
</Border>
<Image Margin="5" HorizontalAlignment="Right" VerticalAlignment="Bottom" Source="http://l.yimg.com/g/images/flickr_logo_gamma.gif.v59899.14" Height="10" />
</Grid>
</WrapPanel>
By not specifying any rows or columns our grid places the 2 items in row 0 column 0 and stacks them on top of each other. The second image has Horizontal and Vertical alignment set to make it appear in the bottom right, and I've added a margin to the 2nd image to bump it up a bit, otherwise it sits on the border which I assume is not what you wanted?
Put your picture and logo in a Canvas element and position them (Canvas.Top, Canvas.Left, etc) as needed.