I am pretty new to WPF... So I need to bind a lines X1 and Y1 properties with an ellipses canvas.left and canvas.top property......
In XAML it works fine...
XAML Code
<Ellipse x:Name="tst" Width="40" Height="40" Canvas.Left="150" Canvas.Top="150" Stroke="Blue" StrokeThickness="2" MouseMove="adjustRoute"/>
<Line X1="{Binding ElementName=tst, Path=(Canvas.Left)}" Y1="{Binding ElementName=tst, Path=(Canvas.Top)}" X2="300" Y2="200" Stroke="Blue" StrokeThickness="2"/>
But I need to do it in the Code Behind Using C#
So I did this
temp = new Line();
tempe = new Ellipse();
tempe.Fill = Brushes.Transparent;
tempe.Stroke = Brushes.Blue;
tempe.StrokeThickness = 1;
tempe.Width = 20;
tempe.Height = 20;
Canvas.SetLeft(tempe, currentPoint.X-10);
Canvas.SetTop(tempe, currentPoint.Y-10);
tempe.MouseMove += adjustRoute;
Binding binding = new Binding { Source = tempe, Path = new PropertyPath(Canvas.LeftProperty), UpdateSourceTrigger=UpdateSourceTrigger.PropertyChanged };
temp.SetBinding(Line.X1Property, binding);
Binding binding2 = new Binding { Source = tempe, Path = new PropertyPath(Canvas.TopProperty), UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged };
temp.SetBinding(Line.Y1Property, binding2);
temp.Stroke = Brushes.Blue;
temp.StrokeThickness = 2;
temp.X1 = currentPoint.X;
temp.Y1 = currentPoint.Y;
temp.X2 = currentPoint.X + 200;
temp.Y2 = currentPoint.Y + 200;
testcanv.Children.Add(temp);
testcanv.Children.Add(tempe);
But it doesn't update the line position when I move the ellipse(in XAML it updates)....
Here currentPoint is the point I am capturing with my mouse click to draw the shapes during runtime and adjustRoute is the function to move them on drag
What did I do wrong here?
Thanks
Make sure you create the Line and Ellipse elements only once, and assign the Bindings only once. Assign the MouseMove handler to the Canvas instead of the Ellipse:
private Line line;
private Ellipse ellipse;
public MainWindow()
{
InitializeComponent();
line = new Line
{
Stroke = Brushes.Blue,
StrokeThickness = 2
};
ellipse = new Ellipse
{
Stroke = Brushes.Blue,
StrokeThickness = 1,
Width = 20,
Height = 20,
Margin = new Thickness(-10)
};
Binding xBinding = new Binding
{
Source = ellipse,
Path = new PropertyPath(Canvas.LeftProperty)
};
line.SetBinding(Line.X1Property, xBinding);
Binding yBinding = new Binding
{
Source = ellipse,
Path = new PropertyPath(Canvas.TopProperty)
};
line.SetBinding(Line.Y1Property, yBinding);
testcanv.Children.Add(line);
testcanv.Children.Add(ellipse);
testcanv.Background = Brushes.Transparent;
testcanv.MouseMove += adjustRoute;
}
private void adjustRoute(object sender, MouseEventArgs e)
{
var p = e.GetPosition(testcanv);
Canvas.SetLeft(ellipse, p.X);
Canvas.SetTop(ellipse, p.Y);
}
Related
This code for a WPF works for one program. It is not working in a new program being created. It results in an exception --- "System.InvalidOperationException: 'Specified element is already the logical child of another element. Disconnect it first.'"
This is part of the .xaml code:
<Canvas x:Name="gCanvasPlotTop"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,0,0,0"
Width="500"
Height="150" />
<Canvas x:Name="gCanvasPlotBottom"
HorizontalAlignment="Left"
VerticalAlignment="Top"
Margin="0,0,0,0"
Width="500"
Height="150" />
Below is part of the .cs code.
Before I call dlgDisplayTwoXYPlots(), I define poXY:
Polyline poXYTop = new Polyline { Stroke = Brushes.Blue };
Polyline poXYBottom = new Polyline { Stroke = Brushes.Blue };
//------------------------------
public dlgDisplayTwoXYPlots(List<double> listdParamsTop,
List<Point> listPointsTop,
Polyline poXYTop,
List<double> listdParamsBottom,
List<Point> listPointsBottom,
Polyline poXYBottom)
{
InitializeComponent();
glistdParamsTop = listdParamsTop;
glistPointsTop = listPointsTop;
gpoXYTop = poXYTop;
glistdParamsBottom = listdParamsBottom;
glistPointsBottom = listPointsBottom;
gpoXYBottom = poXYBottom;
}//DlgPlotXY()
//------------------------------
//------------------------------
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Plot(gCanvasPlotTop, gpoXYTop, glistdParamsTop, glistPointsTop);
Plot(gCanvasPlotBottom, gpoXYBottom, glistdParamsBottom, glistPointsBottom);
}//Window_Loaded
//------------------------------
//------------------------------
private void Plot(Canvas canvas, Polyline poXY, List<double> listdParams, List<Point> listPoints)
{
int iii = 0;
int iNumOfPoints = (int)listdParams[iii++];
double dXmin = listdParams[iii++];
double dXmax = listdParams[iii++];
double dYmin = listdParams[iii++];
double dYmax = listdParams[iii++];
double dPlotWidth = dXmax - dXmin;
double dPlotHeight = dYmax - dYmin;
for (int ii = 0; ii < iNumOfPoints; ii++) {
var pointResult = new Point {
X = (listPoints[ii].X - dXmin) * canvas.Width / dPlotWidth,
Y = canvas.Height - (listPoints[ii].Y - dYmin) * canvas.Height / dPlotHeight
};
poXY.Points.Add(pointResult);
}
canvas.Children.Add(poXY);
//------------------------------
Why does a WPF canvas result in System.InvalidOperationException?
In MainWindow I had
Polyline poXYTop = new Polyline { Stroke = Brushes.Blue};
Polyline poXYBottom = new Polyline { Stroke = Brushes.Blue};
OnePlot(listdSignalXValues, listdSignalYValues, poXYTop, "Signal");
TwoPlots(listdSignalXValues, listdSignalYValues, poXYTop, "Signal DupTop",
listdSignalXValues, listdSignalYValues, poXYBottom, "Signal Bottom");
I had assumed that poXYTop would not return poXYTop with additional info as it was not a ref poXYTop. Now I know it does.
This works:
Polyline poXY = new Polyline { Stroke = Brushes.Blue };
Polyline poXYTop = new Polyline { Stroke = Brushes.Blue };
Polyline poXYBottom = new Polyline { Stroke = Brushes.Blue };
OnePlot(listdSignalXValues, listdSignalYValues, poXY, "Signal");
TwoPlots(listdSignalXValues, listdSignalYValues, poXYTop, "Signal DupTop",
listdSignalXValues, listdSignalYValues, poXYBottom, "Signal Bottom");
There is a Grid, which is filled dynamically with Image controls in code behind(Sorry for that).
Grid has 1 column, many pages, each page has 1 Border with Image as Border.Child inside. What I need is to Zoom (Scale) my Image in Grid when Button.Click event fires. I used Scale Transform with the Image before, but I didn't manage to bind Grid element Image with the Click handler.
Please suggest, how I can zoom images inside grid, step by step.
Thanks in advance!
Yes, I know this is horrible, should be done in different way, I'm still learning, how to do this right.
Method, that generates Grid. After that ZOOM click method ( only for zoom, there is another method for zoom out)
public void RefreshView(List<TiffImage> tiffImageList)
{
try
{
if (tiffImageList.Count == 0)
return;
SetControlSizes();
gridImageList.Children.Clear();
gridImageList.RowDefinitions.Clear();
gridImageList.ColumnDefinitions.Clear();
RowDefinitionCollection rd = gridImageList.RowDefinitions;
ColumnDefinitionCollection cd = gridImageList.ColumnDefinitions;
cd.Add(new ColumnDefinition() { Width = GridLength.Auto });
for (int i = 0; i < tiffImageList.Count; i++)
{
rd.Add(new RowDefinition() { Height = GridLength.Auto });
}
int rowIndex = 0;
foreach (var tiffImage in tiffImageList)
{
Image imageListViewItem = new Image();
imageListViewItem.Margin = new Thickness(0, 0, 0, 0);
RenderOptions.SetBitmapScalingMode(imageListViewItem, BitmapScalingMode.HighQuality);
imageListViewItem.Name = $"Image{tiffImage.index.ToString()}";
imageListViewItem.Source = tiffImage.image;
imageListViewItem.HorizontalAlignment = HorizontalAlignment.Center;
imageListViewItem.VerticalAlignment = VerticalAlignment.Center;
imageListViewItem.Stretch = Stretch.Uniform;
imageListViewItem.VerticalAlignment = VerticalAlignment.Center;
imageListViewItem.HorizontalAlignment = HorizontalAlignment.Center;
Border border = new Border();
border.BorderBrush = Brushes.LightGray;
border.BorderThickness = new Thickness(1);
Thickness margin = border.Margin;
border.Margin = new Thickness(20, 10, 20, 10);
border.Child = imageListViewItem;
Grid.SetColumn(border, 0);
Grid.SetRow(border, rowIndex);
gridImageList.Children.Add(border);
rowIndex++;
}
}
catch (Exception ex)
{
throw ex;
}
}
private void btnZoom_Click(object sender, RoutedEventArgs e)
{
foreach (UIElement item in gridImageList.Children)
{
Border border = (Border)item;
Image image = (Image)border.Child;
var imgViewerScaleTransform = (ScaleTransform)(image.LayoutTransform);
if ((imgViewerScaleTransform.ScaleX + 0.2) > 3 || (imgViewerScaleTransform.ScaleY + 0.2) > 3)
return;
imgViewerScaleTransform.ScaleX += 0.2;
imgViewerScaleTransform.ScaleY += 0.2;
image.LayoutTransform = imgViewerScaleTransform;
}
}
Here is a very simple version of a scalable ItemsControl in a ScrollViewer.
It might be improved in many ways. First of all, you should replace handling Button Click events by binding the Button Command properties to ZoomIn and ZoomOut commands in the view model (left out for brevity).
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<ScrollViewer HorizontalScrollBarVisibility="Auto"
VerticalScrollBarVisibility="Auto">
<ItemsControl ItemsSource="{Binding Images}">
<ItemsControl.LayoutTransform>
<ScaleTransform ScaleX="{Binding Scale}" ScaleY="{Binding Scale}"/>
</ItemsControl.LayoutTransform>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<UniformGrid Columns="1"/>
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
<ItemsControl.ItemTemplate>
<DataTemplate>
<Border BorderThickness="1" BorderBrush="LightGray">
<Image Source="{Binding}"/>
</Border>
</DataTemplate>
</ItemsControl.ItemTemplate>
</ItemsControl>
</ScrollViewer>
<StackPanel Grid.Row="1" Orientation="Horizontal" HorizontalAlignment="Right">
<Button Content=" + " Click="ZoomInButtonClick"/>
<Button Content=" - " Click="ZoomOutButtonClick"/>
</StackPanel>
</Grid>
The code behind:
public partial class MainWindow : Window
{
private readonly ViewModel viewModel = new ViewModel();
public MainWindow()
{
InitializeComponent();
DataContext = viewModel;
foreach (string imageFile in Directory.EnumerateFiles(
#"C:\Users\Public\Pictures\Sample Pictures", "*.jpg"))
{
viewModel.Images.Add(new BitmapImage(new Uri(imageFile)));
}
}
private void ZoomInButtonClick(object sender, RoutedEventArgs e)
{
viewModel.Scale *= 1.1;
}
private void ZoomOutButtonClick(object sender, RoutedEventArgs e)
{
viewModel.Scale /= 1.1;
}
}
public class ViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
public ObservableCollection<ImageSource> Images { get; }
= new ObservableCollection<ImageSource>();
private double scale = 1;
public double Scale
{
get { return scale; }
set
{
scale = value;
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(nameof(Scale)));
}
}
}
I managed to find an ugly, horrible solution, sorry for that. Use it only, if there is no any alternative. Please, add answers with better solutions. Thanks for your time!
We need to add (in code behind) Image.LayoutTransform defined as ScaleTransform:
imageListViewItem.LayoutTransform = new ScaleTransform();
I used // to emphasize changes in method below. Also, most changes happened in Zoom/ZoomOut methods below.
public void RefreshView(List<TiffImage> tiffImageList)
{
try
{
if (tiffImageList.Count == 0)
return;
SetControlSizes();
gridImageList.Children.Clear();
gridImageList.RowDefinitions.Clear();
gridImageList.ColumnDefinitions.Clear();
RowDefinitionCollection rd = gridImageList.RowDefinitions;
ColumnDefinitionCollection cd = gridImageList.ColumnDefinitions;
cd.Add(new ColumnDefinition() { Width = GridLength.Auto });
for (int i = 0; i < tiffImageList.Count; i++)
{
rd.Add(new RowDefinition() { Height = GridLength.Auto });
}
int rowIndex = 0;
foreach (var tiffImage in tiffImageList)
{
Image imageListViewItem = new Image();
imageListViewItem.Margin = new Thickness(0, 0, 0, 0);
RenderOptions.SetBitmapScalingMode(imageListViewItem, BitmapScalingMode.HighQuality);
imageListViewItem.Name = $"Image{tiffImage.index.ToString()}";
imageListViewItem.Source = tiffImage.image;
imageListViewItem.HorizontalAlignment = HorizontalAlignment.Center;
imageListViewItem.VerticalAlignment = VerticalAlignment.Center;
imageListViewItem.Stretch = Stretch.Uniform;
imageListViewItem.VerticalAlignment = VerticalAlignment.Center;
imageListViewItem.HorizontalAlignment = HorizontalAlignment.Center;
// Add HERE!!!
imageListViewItem.LayoutTransform = new ScaleTransform();
//
Border border = new Border();
border.BorderBrush = Brushes.LightGray;
border.BorderThickness = new Thickness(1);
Thickness margin = border.Margin;
border.Margin = new Thickness(20, 10, 20, 10);
border.Child = imageListViewItem;
Grid.SetColumn(border, 0);
Grid.SetRow(border, rowIndex);
gridImageList.Children.Add(border);
rowIndex++;
}
}
catch (Exception ex)
{
throw ex;
}
}
We take all elements from the Grid and Scale(Zoom) them, then we clear the Grid.Children and fill it with new Items.
private void btnZoom_Click(object sender, RoutedEventArgs e)
{
List<Border> list = new List<Border>();
foreach (UIElement item in gridImageList.Children)
{
Border border = (Border)item;
Image image = (Image)border.Child;
var imgViewerScaleTransform = (ScaleTransform)(image.LayoutTransform);
imgViewerScaleTransform.CenterX = 0.5;
imgViewerScaleTransform.CenterY = 0.5;
if ((imgViewerScaleTransform.ScaleX + 0.2) > 3 || (imgViewerScaleTransform.ScaleY + 0.2) > 3)
return;
imgViewerScaleTransform.ScaleX += 0.2;
imgViewerScaleTransform.ScaleY += 0.2;
image.LayoutTransform = imgViewerScaleTransform;
border.Child = image;
list.Add(border);
}
gridImageList.Children.Clear();
foreach (Border border in list)
{
gridImageList.Children.Add(border);
}
}
private void btnZoomOut_Click(object sender, RoutedEventArgs e)
{
List<Border> list = new List<Border>();
foreach (UIElement item in gridImageList.Children)
{
Border border = (Border)item;
Image image = (Image)border.Child;
var imgViewerScaleTransform = (ScaleTransform)(image.LayoutTransform);
imgViewerScaleTransform.CenterX = 0.5;
imgViewerScaleTransform.CenterY = 0.5;
if ((imgViewerScaleTransform.ScaleX - 0.2) < 0.8 || (imgViewerScaleTransform.ScaleY - 0.2) < 0.8)
return;
imgViewerScaleTransform.ScaleX += -0.2;
imgViewerScaleTransform.ScaleY += -0.2;
image.LayoutTransform = imgViewerScaleTransform;
border.Child = image;
list.Add(border);
}
gridImageList.Children.Clear();
foreach (Border border in list)
{
gridImageList.Children.Add(border);
}
}
Click the points, I want to make from the polygon area on image.
myPolygon = new Polygon();
myPolygon.Stroke = Brushes.Black;
myPolygon.Fill = Brushes.LightYellow;
myPolygon.StrokeThickness = 2;
myPolygon.HorizontalAlignment = HorizontalAlignment.Left;
myPolygon.VerticalAlignment = VerticalAlignment.Center;
myPolygon.PreviewMouseLeftButtonDown += new MouseButtonEventHandler(Polygon_MouseDown);
myPolygon.PreviewMouseLeftButtonUp += new MouseButtonEventHandler(Polygon_MouseUp);
private void Polygon_MouseDown(object sender, MouseButtonEventArgs e)
{
Point p = e.GetPosition(image);
myPolygon.Points = new PointCollection() { new Point(p.X,p.Y) };
RootCanvas.Children.Add(myPolygon);
} //MouseClick Event BUT, did not click behavior.. I want draw a line along the points.
How can I do...?
We can draw Polygon using WPF canvas which is a collection of children objects.
Polygon p = new Polygon();
p.Stroke = Brushes.Black;
p.Fill = Brushes.LightBlue;
p.StrokeThickness = 1;
p.HorizontalAlignment = HorizontalAlignment.Left;
p.VerticalAlignment = VerticalAlignment.Center;
p.Points = new PointCollection() { new Point(10, 10), new Point(100, 100), new Point(200, 200) };
freeCanvas.Children.Add(p);
For more information,. please refer the following urls
http://www.codeproject.com/Articles/128705/WPF-rounded-corners-polygon
http://classicalprogrammer.wikidot.com/draw-dynamic-polygons-in-wpf
http://msdn.microsoft.com/en-us/library/ms747393.aspx
I am wondering on the best way of dealing with a problem I have.
I am in the early stages developing a WPF application that has several images that are all
individual classes. I am attempting to use the MVVM model but I wish to implement a Mouse over event such that when I scroll over a image I wish to bring up some information or do some effects over the image I am not quite sure how to go around this but I have an example of the class below.
public class TeamKit
{
private Image mainImage;
public Canvas Position { get; set; }
public TextBlock PlayerText { get; set; }
public TextBlock NameText{ get; set; }
public Player Player { get; set; }
private string _playerName = "Player0";
private string _playerNumber = "0";
private BitmapImage _bImage;
public TeamKit(Thickness t)
{
mainImage = new Image();
_bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
mainImage.Source = _bImage;
mainImage.Stretch = System.Windows.Media.Stretch.None;
Position = new Canvas();
Position.Width = 38;
Position.Height = 45;
Position.Margin = t;
mainImage.Margin = new Thickness(0, 0, 0, 6);
PlayerText = new TextBlock();
PlayerText.Text = ""; PlayerText.TextAlignment = TextAlignment.Center;
PlayerText.Margin = new Thickness(11, 15, 27, 15);
Position.Children.Add(mainImage);
Position.Children.Add(PlayerText);
}
public TeamKit()
{
mainImage = new Image();
_bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
mainImage.Source = _bImage;
mainImage.Stretch = System.Windows.Media.Stretch.None;
Position = new Canvas();
Position.Width = 38;
Position.Height = 45;
//mainImage.Margin = new Thickness(0, 0, 0, 6);
PlayerText = new TextBlock();
PlayerText.Text = _playerNumber; PlayerText.TextAlignment = TextAlignment.Center;
PlayerText.Margin = new Thickness(12, 15, 27, 15);
PlayerText.Width = 15;
Viewbox Vb = new Viewbox();
//Vb.StretchDirection = StretchDirection.Both;
Vb.Stretch = System.Windows.Media.Stretch.Uniform;
Vb.VerticalAlignment = VerticalAlignment.Stretch;
Canvas.SetTop(Vb, 40);
Canvas.SetLeft(Vb, -11);
Vb.MaxWidth = 50;
NameText = new TextBlock();
NameText.Text = _playerName;
NameText.TextAlignment = TextAlignment.Center;
NameText.MaxHeight = 40;
NameText.MaxWidth = 90;
Vb.Child = NameText;
Position.Children.Add(Vb);
//<TextBlock Text="FooAlanghi" TextWrapping="Wrap" TextAlignment="Center" MaxHeight="40" MaxWidth="92" />
Position.Children.Add(mainImage);
Position.Children.Add(PlayerText);
}
public TeamKit(Player Player, int PlayerNumber)
{
this.Player = Player;
_playerNumber = PlayerNumber.ToString();
_playerName = Player.Last_Name;
mainImage = new Image();
_bImage = new BitmapImage(new Uri("pack://Application:,,,/Resources/KitC.png"));
mainImage.Source = _bImage;
mainImage.Stretch = System.Windows.Media.Stretch.None;
Position = new Canvas();
Position.Width = 38;
Position.Height = 45;
//mainImage.Margin = new Thickness(0, 0, 0, 6);
PlayerText = new TextBlock();
PlayerText.Text = _playerNumber; PlayerText.TextAlignment = TextAlignment.Center;
PlayerText.Margin = new Thickness(12, 15, 27, 15);
PlayerText.Width = 15;
Viewbox Vb = new Viewbox();
//Vb.StretchDirection = StretchDirection.Both;
Vb.Stretch = System.Windows.Media.Stretch.Uniform;
Vb.VerticalAlignment = VerticalAlignment.Stretch;
Canvas.SetTop(Vb, 40);
Canvas.SetLeft(Vb, -11);
Vb.MaxWidth = 50;
NameText = new TextBlock();
NameText.Text = _playerName;
NameText.TextAlignment = TextAlignment.Center;
NameText.MaxHeight = 40;
NameText.MaxWidth = 90;
Vb.Child = NameText;
Position.Children.Add(Vb);
//<TextBlock Text="FooAlanghi" TextWrapping="Wrap" TextAlignment="Center" MaxHeight="40" MaxWidth="92" />
Position.Children.Add(mainImage);
Position.Children.Add(PlayerText);
}
public void Add(Panel Parent)
{
Parent.Children.Add(this.Position);
}
public static void DrawPositionLineUp(List<TeamKit> Players, Panel panel, double top, double left)
{
double ix = 0;
foreach (TeamKit t in Players)
{
Canvas.SetLeft(t.Position, left);
Canvas.SetTop(t.Position, ix += top);
t.Add(panel);
}
}
}
It's nice that you're using the MVVM route, but be aware that what you are wanting to do has nothing to do with MVVM. You're question is all view-related (well, mostly).
You're control needs a ToolTip:
<Image ...>
<Image.ToolTip>
<ToolTip ...>
Content (which can be another layout of controls)
</ToolTip>
</Image.ToolTip>
</Image>
As for effects, depending on what effects, a lot of them are already built in (blur, shadow, etc). But, either way you want to use Triggers within the style.
<Image ...>
<Image.Style>
<Style>
<Trigger Property="Image.IsMouseOver" Value="True">
<Setter ... /> <!-- Apply Styles Here -->
</Trigger>
</Style>
</Image.Style>
</Image>
NOTE: It's probably best to pull out the style into a static resource and apply it to all controls of that kind within that Window/User Control/Page or higher up in the chain (Application) so that you can do...
<Image Style="{StaticResource MouseOverImage}" ... />
As for why I said "you're question is all view-related (well, mostly)" ... what I mean is that it is view-related up until the point of databinding, then you must coordinate with your view-model to make sure it exposes properties that you need. Outside of that, it is a 100% view-related question and you do not have to worry about any MVVMness in this situation. Continue using MVVM, but realize that this is how you'd do it whether or not you were using MVVM.
Have you considered using triggers?
When handling mouseover events I usually go with triggers, but you should also consider MVVM light - (or something similar) its a great tool for MVVM enthusiasts.
I know there are issues with popups and orientation. I've read that if a popup is in the visual tree, it should respect the orientation. I have two types of popups, one global (not in the visual tree) and one that is defined on a specific page xaml. I haven't gotten around to dealing with the global yet, but I was hoping to get the page specific one working.
Here is my xaml:
x:Class="Views.MainPanorama"
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"
xmlns:toolkit="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls.Toolkit"
xmlns:toolkitPrimitives="clr-namespace:Microsoft.Phone.Controls.Primitives;assembly=Microsoft.Phone.Controls.Toolkit"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="800"
FontFamily="{StaticResource PhoneFontFamilyNormal}"
FontSize="{StaticResource PhoneFontSizeNormal}"
Foreground="{StaticResource PhoneForegroundBrush}"
SupportedOrientations="PortraitOrLandscape"
shell:SystemTray.IsVisible="False">
<toolkit:TransitionService.NavigationInTransition>
<toolkit:NavigationInTransition>
<toolkit:NavigationInTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardIn"/>
</toolkit:NavigationInTransition.Backward>
<toolkit:NavigationInTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardIn"/>
</toolkit:NavigationInTransition.Forward>
</toolkit:NavigationInTransition>
</toolkit:TransitionService.NavigationInTransition>
<toolkit:TransitionService.NavigationOutTransition>
<toolkit:NavigationOutTransition>
<toolkit:NavigationOutTransition.Backward>
<toolkit:TurnstileTransition Mode="BackwardOut"/>
</toolkit:NavigationOutTransition.Backward>
<toolkit:NavigationOutTransition.Forward>
<toolkit:TurnstileTransition Mode="ForwardOut"/>
</toolkit:NavigationOutTransition.Forward>
</toolkit:NavigationOutTransition>
<ScrollViewer x:Name="mainScroll">
<Grid x:Name="LayoutRoot" Style="{StaticResource BackgroundStyle}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Image x:Name="icon" Source="/Folder;component/Images/Icons/logo.png" Height="24" Width="175" HorizontalAlignment="Left" Margin="20, 15, 0, 0" />
<controls:Panorama Name="panMain" HeaderTemplate="{StaticResource PanoramaHeaderTemplate}" Grid.Row="1" Margin="0, -10, 0, 0" Height="680">
<!--Panorama definition here-->
</controls:Panorama>
<gbl:SecureFooter ShowLock="True" x:Name="panoFoot" Grid.Row="2" VerticalAlignment="Bottom" Margin="24, 24, 24, 0" />
<Popup x:Name="_popup" Grid.Row="3" />
</Grid>
</ScrollViewer>
The page works and the popup appears, but when I rotate the phone or emulator, the contents of the popup don't change orientation.
I'm setting the contents of the popup in code using:
_popup.Child = new OneOfTwoPopupUserControls();
Could this be causing the popup to ignore orientation? Does it need to have the full contents inside it when it's created in the xaml?
If you want to add the Popup to the visual tree, use the following line, the Popup rotates correctly:
LayoutRoot.Children.Add(popupInstance);
From what I understand Popup lives outside the visual tree of the Page, since the Page is what handles the Orientation changes the Popup itself is not affected.
The only solution I've worked with is listening to the orientation changed events and doing my own transform of the popup contents. Not ideal and didn't work well for me. In the end I discarded the Popup.
Sorry I couldn't be more help.
Its actually quite simple to rotate the Popup - or its content to be precise - according to orientation. All you have to do is to listen to Orientation changes ...
static PhoneApplicationFrame ApplicationRootFrame
{
get { return ((PhoneApplicationFrame) Application.Current.RootVisual); }
}
ApplicationRootFrame.OrientationChanged += OnOrientationChanged
And do something like the code below does. The TransformGroup ensures that the Popup content is rotated around the center of the content.
private static void ApplyOrientationTransform(PageOrientation orientation, FrameworkElement popupContent)
{
TransformGroup group;
switch (orientation)
{
case PageOrientation.LandscapeRight:
group = new TransformGroup();
group.Children.Add(new TranslateTransform { X = -popupContent.ActualWidth / 2, Y = -popupContent.ActualHeight / 2 });
group.Children.Add(new RotateTransform {CenterX = 0, CenterY = 0, Angle = -90});
group.Children.Add(new TranslateTransform { X = popupContent.ActualWidth / 2, Y = popupContent.ActualHeight / 2 });
popupContent.RenderTransform = group;
break;
case PageOrientation.LandscapeLeft:
group = new TransformGroup();
group.Children.Add(new TranslateTransform { X = -popupContent.ActualWidth / 2, Y = -popupContent.ActualHeight / 2 });
group.Children.Add(new RotateTransform {CenterX = 0, CenterY = 0, Angle = 90});
group.Children.Add(new TranslateTransform { X = popupContent.ActualWidth / 2, Y = popupContent.ActualHeight / 2 });
popupContent.RenderTransform = group;
break;
default:
popupContent.RenderTransform = null;
break;
}
}
I did originally try the answer as described by Oliver, but found the sizing of the popup needed changing for the information I was trying to display. I cheated a little to complete a similar issue I was having.
Initially I had all of the popup rendering calculated in the showPopup method:
private void showPopup()
{
Session session = App.getSession();
Template template = session.getTemplate();
border.BorderBrush = new SolidColorBrush(Colors.White);
border.BorderThickness = new Thickness(2);
border.Margin = new Thickness(10, 10, 10, 10);
int initialMargin ;
int landMargin ; // margin for information if displayed in landscape orientation
StackPanel stkPnlOuter = new StackPanel();
stkPnlOuter.Background = new SolidColorBrush(Colors.Black);
stkPnlOuter.Orientation = System.Windows.Controls.Orientation.Vertical;
stkPnlOuter.Tap += new EventHandler<System.Windows.Input.GestureEventArgs>(stkPnlOuter_Tap);
if (this.Orientation == PageOrientation.PortraitUp || this.Orientation == PageOrientation.PortraitDown)
{
initialMargin = 0;
landMargin = 0;
}
else
{
initialMargin = 5;
landMargin = 10;
}
TextBlock txt_blk1 = new TextBlock();
txt_blk1.Text = "Loaded Type:";
txt_blk1.TextAlignment = TextAlignment.Left;
txt_blk1.FontSize = 20;
txt_blk1.FontWeight = FontWeights.Bold;
txt_blk1.Margin = new Thickness(5, 5, 5, 5);
txt_blk1.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk2 = new TextBlock();
txt_blk2.Text = template.templateType == TemplateType.TYPE.TEMPLATE_FILE ? "Valido Template File" : "Valido Assessment File";
txt_blk2.TextAlignment = TextAlignment.Left;
txt_blk2.FontSize = 20;
txt_blk2.Margin = new Thickness(5,initialMargin, 5, initialMargin);
txt_blk2.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk3 = new TextBlock();
txt_blk3.Text = "Template Type:";
txt_blk3.TextAlignment = TextAlignment.Left;
txt_blk3.FontSize = 20;
txt_blk3.FontWeight = FontWeights.Bold;
txt_blk3.Margin = new Thickness(5, 10, 5, 5);
txt_blk3.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk4 = new TextBlock();
txt_blk4.Text = TemplateClassification.getName();
txt_blk4.TextAlignment = TextAlignment.Left;
txt_blk4.FontSize = 20;
txt_blk4.Margin = new Thickness(5, landMargin, 5, initialMargin);
txt_blk4.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk5 = new TextBlock();
txt_blk5.Text = "Client Reference:";
txt_blk5.TextAlignment = TextAlignment.Left;
txt_blk5.FontWeight = FontWeights.Bold;
txt_blk5.FontSize = 20;
txt_blk5.Margin = new Thickness(5, 10, 5, 5);
txt_blk5.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk6 = new TextBlock();
txt_blk6.Text = template.ClientRef == null ? "-" : template.ClientRef;
txt_blk6.TextAlignment = TextAlignment.Left;
txt_blk6.FontSize = 20;
txt_blk6.Margin = new Thickness(5, landMargin, 5, initialMargin);
txt_blk6.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk7 = new TextBlock();
txt_blk7.Text = "Template Code:";
txt_blk7.TextAlignment = TextAlignment.Left;
txt_blk7.FontWeight = FontWeights.Bold;
txt_blk7.FontSize = 20;
txt_blk7.Margin = new Thickness(5, 10, 5, 5);
txt_blk7.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk8 = new TextBlock();
txt_blk8.Text = template.Code;
txt_blk8.TextAlignment = TextAlignment.Left;
txt_blk8.FontSize = 20;
txt_blk8.Margin = new Thickness(5, landMargin, 5, initialMargin);
txt_blk8.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk9 = new TextBlock();
txt_blk9.Text = "Template Title:";
txt_blk9.TextAlignment = TextAlignment.Left;
txt_blk9.FontWeight = FontWeights.Bold;
txt_blk9.FontSize = 20;
txt_blk9.Margin = new Thickness(5, 10, 5, 5);
txt_blk9.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk10 = new TextBlock();
txt_blk10.Text = template.Title;
txt_blk10.TextAlignment = TextAlignment.Left;
txt_blk10.FontSize = 20;
txt_blk10.Margin = new Thickness(5, landMargin, 5, initialMargin);
txt_blk10.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk11 = new TextBlock();
txt_blk11.Text = "Modified Date:";
txt_blk11.TextAlignment = TextAlignment.Left;
txt_blk11.FontWeight = FontWeights.Bold;
txt_blk11.FontSize = 20;
txt_blk11.Margin = new Thickness(5, 10, 5, 5);
txt_blk11.Foreground = new SolidColorBrush(Colors.White);
TextBlock txt_blk12 = new TextBlock();
txt_blk12.Text = Valido_CA.modCommon.DateFromString(template.ModifiedDate);
txt_blk12.TextAlignment = TextAlignment.Left;
txt_blk12.FontSize = 20;
txt_blk12.Margin = new Thickness(5, landMargin, 5, 5);
txt_blk12.Foreground = new SolidColorBrush(Colors.White);
if (this.Orientation == PageOrientation.PortraitUp || this.Orientation == PageOrientation.PortraitDown)
{
stkPnlOuter.Children.Add(txt_blk1);
stkPnlOuter.Children.Add(txt_blk2);
stkPnlOuter.Children.Add(txt_blk3);
stkPnlOuter.Children.Add(txt_blk4);
stkPnlOuter.Children.Add(txt_blk5);
stkPnlOuter.Children.Add(txt_blk6);
stkPnlOuter.Children.Add(txt_blk7);
stkPnlOuter.Children.Add(txt_blk8);
stkPnlOuter.Children.Add(txt_blk9);
stkPnlOuter.Children.Add(txt_blk10);
stkPnlOuter.Children.Add(txt_blk11);
stkPnlOuter.Children.Add(txt_blk12);
}
else
{
StackPanel stkPnlLeft = new StackPanel();
stkPnlLeft.Orientation = System.Windows.Controls.Orientation.Vertical;
stkPnlLeft.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
StackPanel stkPnlRight = new StackPanel();
stkPnlRight.Orientation = System.Windows.Controls.Orientation.Vertical;
stkPnlRight.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
stkPnlOuter.Orientation = System.Windows.Controls.Orientation.Horizontal;
stkPnlLeft.Children.Add(txt_blk1);
stkPnlRight.Children.Add(txt_blk2);
stkPnlLeft.Children.Add(txt_blk3);
stkPnlRight.Children.Add(txt_blk4);
stkPnlLeft.Children.Add(txt_blk5);
stkPnlRight.Children.Add(txt_blk6);
stkPnlLeft.Children.Add(txt_blk7);
stkPnlRight.Children.Add(txt_blk8);
stkPnlLeft.Children.Add(txt_blk9);
stkPnlRight.Children.Add(txt_blk10);
stkPnlLeft.Children.Add(txt_blk11);
stkPnlRight.Children.Add(txt_blk12);
stkPnlOuter.Children.Add(stkPnlLeft);
stkPnlOuter.Children.Add(stkPnlRight);
}
StackPanel stkPnlInner = new StackPanel();
stkPnlInner.Orientation = System.Windows.Controls.Orientation.Horizontal;
stkPnlInner.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
Button btn_OK = new Button();
btn_OK.Content = "OK";
btn_OK.Width = 100;
btn_OK.Click += new RoutedEventHandler(btn_OK_Click);
stkPnlInner.Children.Add(btn_OK);
stkPnlInner.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
stkPnlOuter.Children.Add(stkPnlInner);
border.Child = stkPnlOuter;
if (this.Orientation == PageOrientation.PortraitUp || this.Orientation == PageOrientation.PortraitDown)
{
border.Width = 350;
border.Height = 500;
transforBorder(border);
infoPopup.Child = border;
infoPopup.IsOpen = true;
infoPopup.VerticalOffset = (this.ActualHeight - border.Height) / 2;
infoPopup.HorizontalOffset = (this.ActualWidth - border.Width) / 2;
}
else
{
border.Width = 600;
border.Height = 350;
transforBorder(border);
infoPopup.Child = border;
infoPopup.IsOpen = true;
infoPopup.HorizontalOffset = (this.ActualHeight - border.Width) / 2;
infoPopup.VerticalOffset = (this.ActualWidth - border.Height) / 2;
}
}
then in the OrientationChanged method I used the infoPopup.IsOpen = false, then called the showPopup method again.
Possibly a slightly sloppy way of doing this, but because I needed to change the width and height of the border I found this a simple was to complete the task.