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.
Related
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);
}
Currently i am working on image processing project, where i have one review screen in which i set the image on image container, and on top of the image, all four corners has meta data, which are fixed. Means while i zoom in/out the image, the top content will remain at the fixed position not move. This is my requirement.
Now i have set all content dynamically using the stack panel and all meta data will stay on fixed position except the bottom right position, which will be moved while image is zoomed in/out.
below is the reference screen shot where red mark shows the metadata will moved and hide at right side.
Here is the code for bottom right content
public async Task<ScrollViewer> CreateNewScrollViewer(ImageInfo item)
{
ScrollViewer scrollViewerObj = new ScrollViewer();
byte[] rawData;
try
{
//this will update the values of any older sharpness data to 5
if (item.AnnotationSchemaVersion != null && item.AnnotationSchemaVersion.Equals("1.0", StringComparison.InvariantCulture))
{
item.AdjustmentValue.Sharpness = item.BytePerPixel == 3 ? _samSettingsManager.GetTrueColorSharpnessDefaultValue() : _samSettingsManager.GetSingleColorSharpnessDefaultValue();
var saveSharpness = new Task(() => this.UpdateImageAnalysis(item));
saveSharpness.Start();
}
scrollViewerObj.SetValue(AutomationProperties.AutomationIdProperty, "ReviewImageDetailView_ScrollViewer");
scrollViewerObj.SetValue(AutomationProperties.NameProperty, "ReviewImageDetailView_ScrollViewer");
scrollViewerObj.HorizontalScrollBarVisibility = ScrollBarVisibility.Hidden;
scrollViewerObj.VerticalScrollBarVisibility = ScrollBarVisibility.Hidden;
scrollViewerObj.Margin = new Thickness(5, 5, 5, 5);
scrollViewerObj.Focusable = true;
scrollViewerObj.SizeChanged += new SizeChangedEventHandler(ScrollViewerSizeChanged);
Point? fixationTarget = null;
Point? foveaXY = null;
Point? onhXY = null;
FixationType fixationMode = FixationType.Internal;
bool performDistortionCorrection = false;
// Provide fixation values only for WF and Non-External(Non-AnteriorSegment) scans, as distortion correction shall only be applied to WF and Non-External(Non-AnteriorSegment) images.
// All composite UWF/Montage/Auto-Montage images will be distortion corrected (Montage algorithm generates distortion corrected image)
if (Convert.ToInt32(item.FOV, CultureInfo.InvariantCulture) == FOVConstants.Widefield &&
item.ExamMode != ExamModes.AnteriorSegment && SAMConstants.SAMExamSourceUID == item.ExamSourceUID)
{
fixationTarget = item.FixationXY;
foveaXY = item.FoveaXY;
onhXY = item.ONHXY;
fixationMode = item.FixationMode;
performDistortionCorrection = true;
}
//bool isOD = item.Laterality == "OD" ? true : false;
string imageCacheFilePath = _imageCacheFilePath;
string imageFileName = System.IO.Path.GetFileName(item.ImagePath);
//creates the image cache folder if it doesn't exist
if (!Directory.Exists(imageCacheFilePath))
Directory.CreateDirectory(imageCacheFilePath);
ImageContainer imageObj = new ImageContainer(_pixelBufferSize);
await Task.Run(() =>
{
imageObj.Initialize(item.ImagePath, item.ImageCompressionType,
item.ImageWidth, item.ImageHeight, item.BytePerPixel, item.ExamSourceUID, item.Laterality, imageCacheFilePath, _pixelBufferSize, fixationTarget,
foveaXY, item.ProjectedXMin, item.ProjectedYMax, item.ProjectedXMax, item.ProjectedYMin, performDistortionCorrection,
onhXY, fixationMode, item.ONHIdentificationMode);
});
imageObj.InitializeZoomValues(((int)ActualHeight - 40) / 4, ((int)ActualWidth - 40) / 4);
PyramidTools.PyramidImageProcessing processImage = new PyramidTools.PyramidImageProcessing();
//Sets up the pyramid
if (!System.IO.File.Exists(imageCacheFilePath + imageFileName + ExtensionConstants.Raw) || (!System.IO.File.Exists(imageCacheFilePath + imageFileName + ExtensionConstants.Text) && SAMConstants.SAMExamSourceUID == imageObj.ExamSourceUID))
{
rawData = imageObj.ImageDataObj.GetData();
if (rawData != null)
{
processImage.CreatePyramidForGivenImage(rawData, item.BytePerPixel, (int)imageObj.ImageZoom.LowestZoomPercentage, imageFileName, imageObj.ImageDataObj.Width, imageObj.ImageDataObj.Height, imageCacheFilePath);
}
}
else if (!processImage.IsPyramidCreated(imageCacheFilePath + imageFileName, (int)imageObj.ImageZoom.LowestZoomPercentage))
{
rawData = File.ReadAllBytes(imageCacheFilePath + imageFileName + ExtensionConstants.Raw);
if (rawData != null)
{
processImage.CreatePyramidForGivenImage(rawData, item.BytePerPixel, (int)imageObj.ImageZoom.LowestZoomPercentage, imageFileName, imageObj.ImageDataObj.Width, imageObj.ImageDataObj.Height, imageCacheFilePath);
}
}
// For image sharpness
imageObj.ImageProcessing = imageProcessing;
imageObj.TrueColorSharpnessRadius = _trueColorSharpnessRadius;
imageObj.TrueColorSharpnessMinAmount = _trueColorSharpnessMinAmount;
imageObj.TrueColorSharpnessMaxAmount = _trueColorSharpnessMaxAmount;
imageObj.TrueColorSharpnessResizeFactor = _trueColorSharpnessResizeFactor;
imageObj.SingleColorSharpnessRadius = _singleColorSharpnessRadius;
imageObj.SingleColorSharpnessMinAmount = _singleColorSharpnessMinAmount;
imageObj.SingleColorSharpnessMaxAmount = _singleColorSharpnessMaxAmount;
imageObj.SingleColorSharpnessResizeFactor = _singleColorSharpnessResizeFactor;
imageObj.TrueColorSharpnessFactor = _trueColorSharpnessFactor;
imageObj.SingleColorSharpnessFactor = _singleColorSharpnessFactor;
imageObj.IsConstituteImage = item.IsConstituteImage;
imageObj.FOV = item.FOV;
imageObj.SelectedChannel = ChannelTypes.TrueColorChannel;
imageObj.TonalOptimizedValues = new Tonal(128, 128, 128);
imageObj.SetValue(AutomationProperties.AutomationIdProperty, "ReviewImageDetailView_ImageContainer");
imageObj.SetValue(AutomationProperties.NameProperty, "ReviewImageDetailView_ImageContainer");
BitmapImage logo = new BitmapImage();
logo.BeginInit();
logo.UriSource = new Uri("pack://application:,,,/SAMProduction.FundusImageDisplay;component/Images/RotateBlue.png");
logo.EndInit();
imageObj.ImageRotationShow = new System.Windows.Controls.Image();
imageObj.ImageRotationShow.Source = logo;
imageObj.ImageRotationShow.SetValue(AutomationProperties.AutomationIdProperty, "ReviewImageDetailView_180DegreeIcon");
imageObj.ImageRotationShow.SetValue(AutomationProperties.NameProperty, "ReviewImageDetailView_180DegreeIcon");
//imageObj.ImageRotationShow.SetResourceReference(Canvas.BackgroundProperty, "180DegreeIcon");
imageObj.ImageRotationShow.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
imageObj.ImageRotationShow.VerticalAlignment = System.Windows.VerticalAlignment.Top;
imageObj.ImageRotationShow.Visibility = System.Windows.Visibility.Collapsed;
imageObj.ImageRotationShow.Width = 30;
imageObj.ImageRotationShow.Height = 30;
imageObj.ImageRotationShow.Margin = new Thickness(0, 10, 0, 0);
imageObj.ImageFrameNoMessage = item.ImageFrameNoMessage;
Style textBlockStyle = this.TryFindResource("TextWhite16") as Style;
#region Top Left Panel Information
StackPanel topLeftPanelInfo = new StackPanel();
topLeftPanelInfo.Width = 160;
topLeftPanelInfo.Name = "TopLeftPanel";
topLeftPanelInfo.Uid = "TopLeftPanel";
topLeftPanelInfo.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
topLeftPanelInfo.VerticalAlignment = System.Windows.VerticalAlignment.Top;
topLeftPanelInfo.Margin = new Thickness(10, 5, 0, 0);
UpdateTopLeftPanel(item, imageObj, topLeftPanelInfo, textBlockStyle);
#endregion
#region Bottom Left Panel Information
StackPanel bottomLeftPanelInfo = new StackPanel();
bottomLeftPanelInfo.Name = "BottomLeftPanel";
bottomLeftPanelInfo.Uid = "BottomLeftPanel";
bottomLeftPanelInfo.HorizontalAlignment = System.Windows.HorizontalAlignment.Left;
bottomLeftPanelInfo.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
bottomLeftPanelInfo.Margin = new Thickness(10, 0, 0, 5);
UpdateBottomLeftPanel(item, imageObj, bottomLeftPanelInfo, textBlockStyle);
#endregion
#region Bottom Right Panel Information
StackPanel bottomRightPanelInfo = new StackPanel();
bottomRightPanelInfo.Name = "BottomRightPanel";
bottomRightPanelInfo.Uid = "BottomRightPanel";
bottomRightPanelInfo.SetValue(AutomationProperties.AutomationIdProperty, "ReviewImageDetailView_BottomRightPanelInfo");
bottomRightPanelInfo.SetValue(AutomationProperties.NameProperty, "ReviewImageDetailView_BottomRightPanelInfo");
bottomRightPanelInfo.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
bottomRightPanelInfo.VerticalAlignment = System.Windows.VerticalAlignment.Bottom;
bottomRightPanelInfo.Margin = new Thickness(0, 0, 10, 5);
UpdateBottomRightPanel(item, imageObj, bottomRightPanelInfo, textBlockStyle);
#endregion
#region Top Right Panel Information
StackPanel topRightPanelInfo = new StackPanel();
topRightPanelInfo.Name = "TopRightPanel";
topRightPanelInfo.Uid = "TopRightPanel";
topRightPanelInfo.SetValue(AutomationProperties.AutomationIdProperty, "ReviewImageDetailView_TopRightPanelInfo");
topRightPanelInfo.SetValue(AutomationProperties.NameProperty, "ReviewImageDetailView_TopRightPanelInfo");
topRightPanelInfo.HorizontalAlignment = System.Windows.HorizontalAlignment.Right;
topRightPanelInfo.VerticalAlignment = System.Windows.VerticalAlignment.Top;
topRightPanelInfo.Margin = new Thickness(0, 5, 10, 0);
UpdateTopRightPanel(item, imageObj, topRightPanelInfo, textBlockStyle);
#endregion
Grid gridObj = new Grid() { ClipToBounds = true };//
gridObj.SetValue(AutomationProperties.AutomationIdProperty, "ReviewImageDetailView_Grid");
gridObj.SetValue(AutomationProperties.NameProperty, "ReviewImageDetailView_Grid");
gridObj.Children.Add(imageObj);
if (topLeftPanelInfo != null)
{
gridObj.Children.Add(topLeftPanelInfo);
}
if (bottomLeftPanelInfo != null)
{
gridObj.Children.Add(bottomLeftPanelInfo);
}
if (topRightPanelInfo != null)
{
gridObj.Children.Add(topRightPanelInfo);
}
if (bottomRightPanelInfo != null)
{
gridObj.Children.Add(bottomRightPanelInfo);
}
gridObj.Children.Add(imageObj.SelectedBorder);
gridObj.Children.Add(imageObj.ImageRotationShow);
gridObj.Children.Add(imageObj.OverlayGrid);
imageObj.OverlayGrid.MouseLeftButtonUp += OverlayGrid_MouseLeftButtonUp;
imageObj.OverlayGrid.MouseMove += OverlayGrid_MouseMove;
imageObj.OverlayGrid.MouseLeftButtonDown += OverlayGrid_MouseLeftButtonDown;
imageObj.OverlayGrid.PreviewMouseRightButtonDown += OverlayGrid_PreviewMouseRightButtonDown;
imageObj.OverlayGrid.PreviewMouseRightButtonUp += OverlayGrid_PreviewMouseRightButtonUp;
scrollViewerObj.Content = gridObj;
// This binding required to align image properly when it is loading.
Binding HeightBinding = new Binding();
RelativeSource relativeheightSource = new RelativeSource();
relativeheightSource.Mode = RelativeSourceMode.FindAncestor;
relativeheightSource.AncestorType = typeof(ScrollViewer);
HeightBinding.RelativeSource = relativeheightSource;
HeightBinding.Path = new PropertyPath("ActualHeight");
HeightBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
HeightBinding.Mode = BindingMode.OneWay;
imageObj.SetBinding(System.Windows.Controls.Image.HeightProperty, HeightBinding);
Binding WidthBinding = new Binding();
RelativeSource relativeWidthSource = new RelativeSource();
relativeWidthSource.Mode = RelativeSourceMode.FindAncestor;
relativeWidthSource.AncestorType = typeof(ScrollViewer);
WidthBinding.RelativeSource = relativeWidthSource;
WidthBinding.Path = new PropertyPath("ActualWidth");
WidthBinding.UpdateSourceTrigger = UpdateSourceTrigger.PropertyChanged;
WidthBinding.Mode = BindingMode.OneWay;
imageObj.SetBinding(System.Windows.Controls.Image.WidthProperty, WidthBinding);
imageObj.ImageSourceChanged += this.ImageObj_ImageSourceChanged;
imageObj.ZoomValueChanged += this.ImageObj_ZoomValueChanged;
scrollViewerObj.AllowDrop = true;
scrollViewerObj.Drop += ScrollViewer_Drop;
imageObj.ContainerTonalValueChanged += ImageObj_ContainerTonalValueChanged;
// Previously MouseLeftButtonDown event was used.
// Change set no 141851 has change code of CreateNewScrollViewer(). He set Scrollviewer’s Focable property to true.
// It is required to set focusable true for that change set.
// In ScrollViewer's original code (.net code) it is handling event (e.Handled = true) if it can get focus.
// So side effect of 141851 change set is MouseLeftButtonDown event of scrollviewer do not get call when mouse down on it.
// So it misbehaves.
// So here PreviewMouseLeftButtonDown event used.
scrollViewerObj.PreviewMouseLeftButtonDown += ScrollViewerObj_PreviewMouseLeftButtonDown;
scrollViewerObj.MouseLeftButtonUp += this.ScrollViewerObj_MouseLeftButtonUp;
scrollViewerObj.PreviewMouseWheel += ScrollViewerObj_PreviewMouseWheel;
// No need to handle this event
//imageObj.SizeChanged += this.ImageObj_SizeChanged;
imageObj.MouseMove += this.ImageObj_MouseMove;
imageObj.MouseLeftButtonDown += this.ImageObj_MouseLeftButtonDown;
imageObj.MouseLeftButtonUp += this.ImageObj_MouseLeftButtonUp;
gridObj.HorizontalAlignment = System.Windows.HorizontalAlignment.Center;
gridObj.VerticalAlignment = System.Windows.VerticalAlignment.Center;
//It is not necessary to initalize the data
imageObj.ImageID = item.ImageId;
//imageObj.ImagePath = item.ImagePath;
if (imageObj.ExamSourceUID == SAMConstants.SAMExamSourceUID &&
imageObj.ExamMode != ExamModes.AnteriorSegment)
imageObj.OverlayGrid.IsHitTestVisible = IsOverlayGridEnable;
else
imageObj.OverlayGrid.IsHitTestVisible = false;
// imageObj.OverlayGrid.IsHitTestVisible = IsOverlayGridEnable;
//imageObj.ImageSource = imageObj.ImageDataObj;
scrollViewerObj.ContextMenu = CreateContextMenu(scrollViewerObj, imageObj); // set contextmenu
}
catch (Exception ex)
{
_services.Logger.Log(LogLevel.Error, "SAMProduction.FundusImageDisplay", "ImageEditViewerBase", "CreateNewScrollViewer: Error occurred while creating new scrollviewer. : " + ex);
}
finally
{
rawData = null;
}
return scrollViewerObj;
}
Please, let me help out to resolve the moved content on top layer of image, if any one can do. Thanks in Advance.
I find creating views in code very unreadable, so this is how to achieve this in XAML:
<Grid>
<Image .../> // or whatever custom control you use to allow zoom
<StackPanel Name="TopLeft HorizontalAligment="Left" VerticalAligment="Top">
<contente: labels etc ../>
</StackPanel>
...
<StackPanel Name="BottomRight" HorizontalAligment="Right" VerticalAligment="Bottom">
<contente: labels etc ../>
</StackPanel>
</Grid>
The trick is to wrap everything that you want to be in the same place and/or overlay in a Grid. If the StackPanels are after an Image in Grid content, their z-index will be higher and they will be displayed on top of the image.
The Image control by default will be streched to the whole grid, so you should manipulate the zoom with its content, not its size. If that's problematic, just wrap the Image control with another panel, or at best, custom UserControl and work out the size issues there.
Thanks to the Grid, the StackPanels will anchored to the corners, no matter the size and shape of the grid.
Also, you used tag MVVM and your code is almost textbook non-MVVM.
Maybe this will help you rewrite your code.
I have an image of a map inside a scrollviewer and, using 2 canvas, I place a little square (or a map pin image) after the user selects where they are.
Now, since they do not "click" on the map to do so, but they select their location from a list, I need to make that square the center of the view, in the scrollviewer, once they see the map.
In my xaml, I have just a few things since, all the information, comes from an API
<Grid x:Name="firstFloor" Margin="0,50,0,0" Visibility="Visible">
<ScrollViewer x:Name="pruebaScrollViewer1" BringIntoViewOnFocusChange="True" ZoomMode="Enabled" HorizontalScrollBarVisibility="Auto" HorizontalScrollMode="Enabled">
<Grid x:Name="myMap1stFloor">
</Grid>
</ScrollViewer>
</Grid>
and in code behind I have
private void showStorePosition2(string map_id, string name, int width, int height, int tile, int x, int y)
{
IdOfMapWhereIAm = map_id;
if (map_id == "10")
{
if (!_primerPiso)
{
//my parent canvas is defined globally
//the width and height of it come from API
myParentCanvas.Width = width;
myParentCanvas.Height = height;
myParentCanvas.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Center;
myParentCanvas.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Center;
Debug.WriteLine(width);
ImageBrush pushpin = new ImageBrush();
pushpin.ImageSource = new BitmapImage(new Uri("ms-appx:/Imagenes/mappin.png", UriKind.Absolute));
TextBlock storeName = new TextBlock();
storeName.VerticalAlignment = Windows.UI.Xaml.VerticalAlignment.Top;
storeName.HorizontalAlignment = Windows.UI.Xaml.HorizontalAlignment.Left;
storeName.TextAlignment = TextAlignment.Center;
storeName.FontFamily = new Windows.UI.Xaml.Media.FontFamily("Open Sans");
storeName.Height = 20;
storeName.Width = Double.NaN;
storeName.FontSize = 15;
storeName.Text = name;
storeName.Margin = new Thickness(-20, -20, 0, 0);
storeName.TextWrapping = TextWrapping.Wrap;
storeName.Foreground = new SolidColorBrush(Colors.Black);
Canvas myInititialStore = new Canvas();
myInititialStore.Background = pushpin;
myInititialStore.Height = 13;
myInititialStore.Width = 13;
Canvas.SetTop(myInititialStore, (y) * tile);
Canvas.SetLeft(myInititialStore, (x) * tile);
myInititialStore.Children.Add(storeName);
myParentCanvas.Children.Add(myInititialStore);
myMap1stFloor.Children.Add(myParentCanvas);
}
}
}
I was thinking about giving myInitialStore a dependency property, setting the focusProperty, but I do not know how to do it either.
In case someone has the same problem I had, I found a way to "focus" on the Canvas I needed to:
Instead of trying to do so, I changed the view in the scrollviewer, using the Canvas values, that way, when the Canvas is loaded inside the scrollviewer, this last one moves automatically to where the Canvas is located:
ScrollViewer1.ChangeView(((initialStore_x * tileMapToGo) - (widthMapToGo / tileMapToGo)), ((initialStore_y * tileMapToGo) - (heightMapToGo / tileMapToGo)), 1, false);
Hope it helps someone. Regards
In my earlier example of Input Box, I have a window variable. I created some controls(Textbox, Label, Buttons). Parent of these controls is canvas. Parent of canvas is a ViewBox (because ViewBox can only contain one child) and parent of ViewBox is the window.
So hierarchy is like Window->Viewbox->Canvas-> Controls. All these control creation and parenting is done dynamically.
winInputDialog = new Window();
lblPrompt = new Label();
btnOK = new Button();
btnCancel = new Button();
txtInput = new TextBox();
cvContainer = new Canvas();
VB = new Viewbox();
//
// lblPrompt
//
lblPrompt.Background = new SolidColorBrush(SystemColors.ControlColor);
lblPrompt.FontFamily = new FontFamily("Microsoft Sans Serif");
lblPrompt.FontSize = 12;
lblPrompt.Background = new SolidColorBrush(Colors.Transparent);
lblPrompt.FontStyle = FontStyles.Normal;
lblPrompt.Margin = new Thickness(8, 9, 0, 0);
lblPrompt.Name = "lblPrompt";
lblPrompt.Width = 302;
lblPrompt.Height = 82;
lblPrompt.TabIndex = 3;
//
// btnOK
//
btnOK.Margin = new Thickness(322, 8, 0, 0);
btnOK.Name = "btnOK";
btnOK.Width = 64;
btnOK.Height = 24;
btnOK.TabIndex = 1;
btnOK.Content = "OK";
btnOK.Click += new RoutedEventHandler(btnOK_Click);
//
// btnCancel
//
btnCancel.Margin = new Thickness(322, 40, 0, 0);
btnCancel.Name = "btnCancel";
btnCancel.Width = 64;
btnCancel.Height = 24;
btnCancel.TabIndex = 2;
btnCancel.Content = "Cancel";
btnCancel.Click += new RoutedEventHandler(btnCancel_Click);
//
// txtInput
//
txtInput.Margin = new Thickness(8, 70, 0, 0);
txtInput.Name = "txtInput";
txtInput.Width = 379;
txtInput.Height = 25;
txtInput.TabIndex = 0;
//
//Canvas
//
double width = System.Windows.SystemParameters.PrimaryScreenWidth / 3, height = System.Windows.SystemParameters.PrimaryScreenHeight / 4;
cvContainer.Height = height;
cvContainer.Width = width;
cvContainer.Children.Add(txtInput);
cvContainer.Children.Add(btnCancel);
cvContainer.Children.Add(btnOK);
cvContainer.Children.Add(lblPrompt);
cvContainer.ClipToBounds = true;
//
//ViewBox
//
VB.Stretch = Stretch.Fill;
VB.Child = cvContainer;
//
// InputBoxDialog
//
winInputDialog.Width = width;
winInputDialog.Height = height;
winInputDialog.Content = VB;
winInputDialog.Icon = new System.Windows.Media.Imaging.BitmapImage(new System.Uri(System.IO.Directory.GetCurrentDirectory() + #"\drop-box-icon.png"));
winInputDialog.WindowStartupLocation = WindowStartupLocation.CenterScreen;
//winInputDialog.WindowStyle = WindowStyle.SingleBorderWindow;
winInputDialog.ResizeMode = ResizeMode.CanResizeWithGrip;
winInputDialog.Name = "InputBoxDialog";
I have set the width and height property of canvas equal to window. But why my screen look like this:
Why is there space between controls and window borders even though they are in viewbox. I even tried Cliptobounds but still the same.
If i set Viewbox height and width it does not stretch and behave unlike a Viewbox.
i want to set this screen dynamically. How?
Sample Project is at http://122.160.24.172/download/customer_data/InputBox_New.rar.
If you want your window to have a dynamic layout, why won't you use a dynamic container unlike Canvas which is static?
You could use a Grid like this -
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="0.8*"/>
<ColumnDefinition Width ="0.2*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Hello"/>
<Button Grid.Column="1" Content="Ok"/>
<Button Grid.Row="1" Grid.Column="1" Content="Cancel"/>
<TextBox Grid.Row="2" Grid.ColumnSpan="2" Text="Hello"/>
</Grid>
This way your window will layout itself when its size is changed.
You can still adjust the button size and margin if you'd like.
Don't use a Canvas unless you really need support for exact pixel coordination positioning layout.
Also: Why are you layouting your window programatically and not in XAML?
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.