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.
Related
In XAML, PivotItems don't have full width of the screen on a Windows Phone. This is good behavior and design, but for a single image I want it to fill the entire screenwidth.
Can this be accomplished?
The root cause is that default PivotItemMargin is set to 12,0,12,0. We can find the setting in generic.xaml.
So what we need to do is overridding the setting in App.xaml. Just like this:
<Thickness x:Key="PivotItemMargin">0</Thickness>
This is the solution, having a negative margin
<controls:Pivot>
<controls:PivotItem Margin="-10,0,-10,0">
<Grid />
</controls:PivotItem>
<controls:PivotItem Margin="-10,0,-10,0">
<Grid />
</controls:PivotItem>
</controls:Pivot>
Of course you can also use a regular pivot and only have the image margin set to -10,0,-10,0
Please Use this code,
<phone:PhoneApplicationPage
x:Class="NikhilSApp.DemoExample"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="False">
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--Pivot Control-->
// You can specify the width here....
<controls:Pivot Height="800" Width="480">
<!--Pivot item one-->
<controls:PivotItem Height="800" Margin="0,-130,0,0">
<Grid Name="GridMediaQuestion">
<Image HorizontalAlignment="Center" Source="Images/Guess.png" Margin="10,10,10,10" Name="imgReceived" Stretch="Fill" VerticalAlignment="Center" Height="790" Width="470" />
</Grid>
</controls:PivotItem>
<!--Pivot item two-->
<controls:PivotItem Height="800" >
<Grid x:Name="GridPivot2" Background="#ffffc0">
// Place Your Second pivot's Content here
</Grid>
</controls:PivotItem>
</controls:Pivot>
</Grid>
It is Working..
I implemented already... :)
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
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.
In one of my apps I have a usercontrol called FeedControl (yep, it's yet another RSS reader!) which is very simple - just a checkbox to select the item, a textblock to show the feed name and another textblock to show the number of unread feed items. On loading the feeds into an observable collection at startup I then create one instance of the control for each feed and add them all to a listbox - pretty simple stuff really.
XAML code is below:
<UserControl x:Class="MyReader.FeedControl"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
Loaded="UserControl_Loaded" >
<Grid x:Name="LayoutRoot" Height="50" Background="Black" HorizontalAlignment="Left" >
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="70"/>
</Grid.ColumnDefinitions>
<CheckBox Name="Select" Grid.Column="0" IsChecked="{Binding IsSelected}" Margin="-5,-16" Checked="Select_Checked" Background="White"/>
<TextBlock Name="FeedName" Grid.Column="1" Text="{Binding FeedName}" Opacity="1" Margin="-20" VerticalAlignment="Center" FontSize="24"
MouseLeftButtonUp="FeedName_MouseLeftButtonUp" Height="32" Width="360"/>
<TextBlock Name="UnreadItems" Grid.Column="2" Text="{Binding UnreadItems}" Opacity="1" Padding="2" VerticalAlignment="Center" HorizontalAlignment="Right"
FontSize="24" MouseLeftButtonUp="FeedName_MouseLeftButtonUp" />
</Grid>
When the orientation changes of the page the listbox of Feedcontrol items is on I want the feed name textblock to change to the correct size (560px for landscape, 360px for portrait) so I assumed by setting the grid column width to "*" or "Auto" and setting no width for the textblock it would automatically resize but it only resizes to the width of it's text and not the full width.
So then I tried setting the textblock to the default portrait size (360) in the XAML and on the page orientation change event I call the following Method in each instance of the FeedControl currently in the ListBox:
public void ChangeOrientation(bool isLandscape)
{
if (isLandscape)
{
this.LayoutRoot.Width = App.LandscapeWidth; //700
this.FeedName.Width = App.LandscapeItemWidth; //560
}
else
{
this.LayoutRoot.Width = App.PortraitWidth; //480
this.FeedName.Width = App.PortraitItemWidth; //360
}
this.InvalidateArrange();
this.InvalidateMeasure();
}
However, this doesn't work either (no matter what I try) so I am confused about how best to do this... I know there must be a really simple way but so far I've not found it.
Can anybody point me in the right direction please?
Mike
PS sorry for the length of the post... so long for such a simple problem!!
You should set the HorizontalAlignment and HorizontalContentAlignment to HorizontalAlignment.Stretchfor the ListBoxItems which have your control. In addition, set the design width/design height of your control.
Here's an example of one of my controls I have in a listbox, that stretches in landscape mode.
<UserControl x:Class="SabWatch.Resources.Controls.ProgressBox"
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"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
d:DesignHeight="480" d:DesignWidth="480">
<Grid x:Name="LayoutRoot" Style="{StaticResource AppBackgroundStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
</Grid>
</UserControl>
And here's an example of setting the alignment properties in code. you can also do this in XAML (and possibly using a style and giving the ListBox a ItemContainerStyle)
var lbi = new ListBoxItem();
var box = new ProgressBox();
...
lbi.Tag = queueObject;
lbi.Content = box;
lbi.HorizontalAlignment = HorizontalAlignment.Stretch;
lbi.HorizontalContentAlignment = HorizontalAlignment.Stretch;
Where u are placing this control, that you are not mentioned . I think u are placing this control inside a Phone page ; like placing any other control. If so better u manage orientation related stuffs in that page( Container page ) instead of making adjustment in the control. I Think this will solve your issue.
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.