I've created the following page in WinRT / Metro, and expected to get both horizontal and vertical scrollbars from the ScrollViewer, as the content area is larger than the screen and ScrollViewer in both dimensions. Can anyone spot any error here?
<Page
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:Test"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
x:Class="ScrollViewerTestPage"
mc:Ignorable="d">
<Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
<ScrollViewer>
<ItemsControl ItemsSource="{Binding}" Width="2500" >
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<TextBox Width="100" Margin="5" Height="1200" Text="{Binding}"/>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
</Grid>
</Page>
The data is initialized in the constructor like this:
var model = new List<string>();
for (int i = 1; i <= 20; i++) model.Add("" + i);
DataContext = model;
There is a scrollview property for a horizontal scrollbar: http://msdn.microsoft.com/en-us/library/windows/apps/windows.ui.xaml.controls.scrollviewer.horizontalscrollbarvisibility
Related
How can i get the progress value in code?
Here's the XAML:
<ptr:PullToRefreshBox x:Name="ptrBox" HorizontalAlignment="Center" VerticalAlignment="Top" RefreshInvoked="ptrBox_RefreshInvoked">
<ScrollViewer>
<StackPanel Name="SPMain" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
</StackPanel>
</ScrollViewer>
<ptr:PullToRefreshBox.TopIndicatorTemplate>
<DataTemplate>
<ptr:PullRefreshProgressControl Name="ProgressPTR" Progress="300" PullToRefreshText="Pull to refresh" ReleaseToRefreshText="Release"/>
</DataTemplate>
</ptr:PullToRefreshBox.TopIndicatorTemplate>
</ptr:PullToRefreshBox>
Just write this
Progress="{Binding}"
in place of Progress="300"
I have a user control which have elements like this
<UserControl
x:Class="App2.MyImageControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid x:Name="MyGrid" x:FieldModifier="public" ManipulationMode="None" Tapped="MyGrid_Tapped" HorizontalAlignment="Left" VerticalAlignment="Top" >
<Grid.RenderTransform>
<CompositeTransform></CompositeTransform>
</Grid.RenderTransform>
<Border x:Name="MyBorder" x:FieldModifier="public" BorderThickness="1" BorderBrush="Transparent" Width="auto" Height="auto">
<Grid>
<Image x:Name="MyImageO" x:FieldModifier="public" Source="" Width="auto" Height="auto" Stretch="Fill"></Image>
</Grid>
</Border>
</Grid>
I want to bind MyBorder width and height to half of MyImageO width and height at runtime.How do I achieve that .
You could try using the MultiplyConverter to convert a bound value to half of it, but ActualWidth and ActualHeight aren't bindable - they don't raise change notifications. Your best bet is to simply handle SizeChanged events and then set the dimensions of the border based on ActualWidth and ActualHeight of the image.
I am playing with layout for Windows 8 Store Application and noticed that VirtualizingStackPanel.CanVerticallyScroll Property crash my application, but this property should work by this page.
It is strange, even Visual Studio Renders it correctly:
My code of XAML:
<common:LayoutAwarePage
x:Name="pageRoot"
x:Class="App5.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:App5"
xmlns:data="using:App5.Data"
xmlns:common="using:App5.Common"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Page.Resources>
<CollectionViewSource
x:Name="groupedItemsViewSource"
Source="{Binding Items}"
IsSourceGrouped="false"
ItemsPath="Items"
d:Source="{Binding Items, Source={d:DesignInstance Type=data:DataGroup, IsDesignTimeCreatable=True}}"/>
</Page.Resources>
<Grid Style="{StaticResource LayoutRootStyle}">
<GridView
x:Name="itemGridView"
AutomationProperties.AutomationId="ItemGridView"
AutomationProperties.Name="Grouped Items"
ItemsSource="{Binding Source={StaticResource groupedItemsViewSource}}"
ItemTemplate="{StaticResource Standard250x250ItemTemplate}"
SelectionMode="None"
IsSwipeEnabled="false"
IsItemClickEnabled="True"
ItemClick="ItemView_ItemClick">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Vertical" CanVerticallyScroll="False"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
</GridView>
</Grid>
</common:LayoutAwarePage>
What I want to achieve: Gridview does not have any groups and items stand in 2-3 rows with scroll to the right.
------------
|1|4|7|10|
------------
|2|5|8|11|
------------
|3|6|9|12|
------------
I am trying to show a circle in a telrik gridview and I wanted to bind the colour dynamically to this circle.Since I am working with MVVM pattern I have to bound my view model to the datacontext of my page.But the binding does not seems to be working for me.When I investigated the issue was because the column headers does not have any datacontext, so I tried bound the value using 'ElementName' and tried to use its datacontext but even that is also not working.
Could anyone please help me resolving this issue.
This is my xaml code
<UserControl x:Class="TelrikStyling.MainPage"
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:telerikGrid="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:myColour="clr-namespace:TelrikStyling"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" x:Name="myMainPage">
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<telerikGrid:RadGridView x:Name="radGridView"
AutoGenerateColumns="False">
<telerikGrid:RadGridView.Columns>
<telerikGrid:GridViewDataColumn>
<telerikGrid:GridViewDataColumn.Header>
<StackPanel Orientation="Horizontal">
<Ellipse x:Name="headerEllipse" Width="20" Height="20" Fill="{Binding ElementName=myMainPage, Path=DataContext.Colour}"></Ellipse>
</StackPanel>
</telerikGrid:GridViewDataColumn.Header>
</telerikGrid:GridViewDataColumn>
</telerikGrid:RadGridView.Columns>
</telerikGrid:RadGridView>
</Grid>
</UserControl>
This is my view model
public MainPage()
{
InitializeComponent();
this.DataContext = new MainPageViewModel { Colour = new SolidColorBrush(Colors.Red) };
}
Try using RelativeSource instead of ElementName in your Binding
I've had similar issues in the past where I couldn't resolve a binding using ElementName but could with RelativeSource. I think it may have to do with the timing of resolving the binding.
<Ellipse Fill="{Binding RelativeSource={RelativeSource
AncestorType={x:Type myColour:MainPage}},
Path=DataContext.Colour}" />
I have found a solution for my problem that is by adding new ellipse to the layout as a child of the layout grid and then bind the Colour property of the viewmodel to the Fill property of new ellipse.Later I have bound Fill property of the ellipse in the RadGrid to the newly added ellipse.
This is the new xaml
<UserControl x:Class="TelrikStyling.MainPage"
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:telerikGrid="http://schemas.telerik.com/2008/xaml/presentation"
xmlns:myColour="clr-namespace:TelrikStyling"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400" x:Name="myMainPage">
<Grid x:Name="LayoutRoot" Background="White" Loaded="LayoutRoot_Loaded">
<telerikGrid:RadGridView x:Name="radGridView"
AutoGenerateColumns="False">
<telerikGrid:RadGridView.Columns>
<telerikGrid:GridViewDataColumn>
<telerikGrid:GridViewDataColumn.Header>
<StackPanel Orientation="Horizontal">
<Ellipse x:Name="headerEllipse" Width="20" Height="20" Fill="{Binding ElementName=invisibleEllipse, Path=Fill}"></Ellipse>
</StackPanel>
</telerikGrid:GridViewDataColumn.Header>
</telerikGrid:GridViewDataColumn>
</telerikGrid:RadGridView.Columns>
</telerikGrid:RadGridView>
<Ellipse x:Name="invisibleEllipse" Width="20" Height="20" Fill="{Binding Colour}"></Ellipse>
</Grid>
</UserControl>
Can anyone tell me why the binding was not working when I gives myMainPage as the element name and it started working when I given a new elisple?
Untill someone answer to this question, I am marking this as an answer.
I can not figure out what I did wrong. I have a Usercontrol that has a vertical progressbar and under it a label.
<UserControl x:Class="IFramedInBrowser.Code"
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"
mc:Ignorable="d" Height="150" Width="15">
<Grid Width="120" Height="15" >
<StackPanel Width="120" Height="15" >
<ProgressBar Grid.Row="0" Value="{Binding Path=Percent}" Maximum="100" Width="120" Height="15" />
</StackPanel>
<TextBlock Grid.Row="1" Height="30" HorizontalAlignment="Left" Name="textBlock1" Text="{Binding Path=Symbol.Name}" VerticalAlignment="Top" >
<TextBlock.RenderTransform>
<RotateTransform Angle="90"/>
</TextBlock.RenderTransform>
</TextBlock>
<Grid.RenderTransform>
<RotateTransform Angle="-90"/>
</Grid.RenderTransform>
</Grid>
</UserControl>
This usercontrol is then used in a ItemsControl
<ItemsControl x:Name="HorizontalListBox"
ItemsSource="{Binding Source={StaticResource MyViewModel}, Path=List}"
HorizontalAlignment="Stretch"
HorizontalContentAlignment="Center" Height="150"
>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<my:Code DataContext="{Binding}">
</my:Code>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
It should look like a piano keybord at the end...
After the rotation transformation the progressbar is chopped... What did I dowrong? How to fix this?
You can try to add different background colors to all controls to find out sizes of controls.
Also SilverlightSpy is now free for read only and you can go through the real visual tree at runtime.
Anyway, I would suggest to change the orientation of ProgressBar by customizing its template.
This is a clipping issue. You are setting too many heights and widths everywhere and it's confusing to know which one is in control of dimensions. Also, the stacking in the ListBox works on the layout and the RotateTransform is only effective on the final visual pass, so it's rotating a clipped progress bar.
You should follow jumbo's advice and create a vertical progress bar by modifying the template, not by rotation.
If you don't want to create the template, then you need to remove the main Grid you have in the UserControl and use a Canvas instead. Canvases don't clip. They let your elements float freely, which is probably what you want.