I have an app load pictures from the internet I want to add a popup event to the image so the user can view the image by click on it !
I've try a lot of things to do that all that I can found is to resize the image or just view a content dialog with a text on it !
Here's my code :
private static void view_tapped(object sender, TappedRoutedEventArgs e)
{
Viewbox image = sender as Viewbox;
Panel parent = image.Parent as Panel;
if (parent != null)
{
image.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5 };
parent.Children.Remove(image);
parent.HorizontalAlignment = HorizontalAlignment.Stretch;
parent.VerticalAlignment = VerticalAlignment.Stretch;
parent.Children.Add(new Popup() { Child = image, IsOpen = true, Tag = parent });
}
else
{
Popup popup = image.Parent as Popup;
popup.Child = null;
Panel panel = popup.Tag as Panel;
image.RenderTransform = null;
panel.Children.Add(image);
}
}
I want it to look like that I want to keep my old image in the same place and create a new grid that have the same image like this image you can view it here
I can't use the xaml file because my image load from the web by code using a dll file !
The reason why the image doesn't display is because you don't add an Image control into the ViewBox to display the image content, you can try the following code to display an image in the popup.
private void Viewbox_Tapped(object sender, TappedRoutedEventArgs e)
{
Viewbox image = sender as Viewbox;
Image imageControl = new Image() { Width = 500, Height = 500 };
Uri uri = new Uri("Your image URL");
BitmapImage source = new BitmapImage(uri);
imageControl.Source = source;
image.Child = imageControl;
Panel parent = image.Parent as Panel;
if (parent != null)
{
image.RenderTransform = new ScaleTransform() { ScaleX = 0.5, ScaleY = 0.5 };
parent.Children.Remove(image);
parent.HorizontalAlignment = HorizontalAlignment.Stretch;
parent.VerticalAlignment = VerticalAlignment.Stretch;
parent.Children.Add(new Popup() { Child = image, IsOpen = true, Tag=parent});
}
else
{
Popup popup = image.Parent as Popup;
popup.Child = null;
Panel panel = popup.Tag as Panel;
image.RenderTransform = null;
panel.Children.Add(image);
}
}
By the way, please notice that the Popup is a control that displays content on top of existing content, within the bounds of the application window, and pay attention to the Remarks part,
Do not use a Popup if a Flyout, MenuFlyout, ToolTip or ContentDialog (MessageDialog for a Windows 8 app) is more appropriate.
Related
I have a UserControl which by default is anchored at the bottom like this:
var customTaskPaneContent = new CustomTaskPaneContent(jobId, _ipcClient, document, AddCustomTaskPane);
var customTaskPane = CustomTaskPanes.Add(customTaskPaneContent, CustomTaskPaneTitle, document.ActiveWindow);
customTaskPane.DockPosition = Office.MsoCTPDockPosition.msoCTPDockPositionBottom;
customTaskPane.Height = 130;
customTaskPane.Visible = true;
customTaskPane.VisibleChanged += CustomTaskPane_VisibleChanged;
customTaskPane.DockPositionChanged += CustomTaskPane_DockPositionChanged;
private void CustomTaskPane_DockPositionChanged(object sender, EventArgs e)
{
var customTaskPane = sender as Microsoft.Office.Tools.CustomTaskPane;
if(customTaskPane != null)
{
if (customTaskPane.DockPosition == Office.MsoCTPDockPosition.msoCTPDockPositionFloating)
{
//ATTEMPT 1
//customTaskPane.Width = 1000;
//ATTEMPT 2
var userControl = customTaskPane.Control;
var size = new System.Drawing.Size(1500, 400);
userControl.Size = size;
}
}
}
When I drag the panel and its position changes to msoCTPDockPositionFloating the assigned dimensions are too small and I would like to change its width.
I have made several attempts but the dimensions are never changed. Which is the correct way to change the Width size?
Try to change the Size property of the content as well in the following way:
private void myCustomTaskPane_DockPositionChanged(object sender, EventArgs e)
{
Microsoft.Office.Tools.CustomTaskPane taskPane =
sender as Microsoft.Office.Tools.CustomTaskPane;
if (taskPane != null)
{
// Adjust sizes of user control and flow panel to fit current task pane size.
MyUserControl userControl = taskPane.Control as MyUserControl;
System.Drawing.Size paneSize = new System.Drawing.Size(taskPane.Width, taskPane.Height);
userControl.Size = paneSize;
userControl.FlowPanel.Size = paneSize;
// Adjust flow direction of controls on the task pane.
if (taskPane.DockPosition ==
Office.MsoCTPDockPosition.msoCTPDockPositionTop ||
taskPane.DockPosition ==
Office.MsoCTPDockPosition.msoCTPDockPositionBottom)
{
userControl.FlowPanel.FlowDirection =
System.Windows.Forms.FlowDirection.LeftToRight;
}
else
{
userControl.FlowPanel.FlowDirection =
System.Windows.Forms.FlowDirection.TopDown;
}
}
}
This code example assumes that the task pane contains a UserControl named MyUserControl, and the UserControl contains a FlowLayoutPanel named FlowPanel.
See CustomTaskPane Interface for the full sample code.
I need to display a full screen dialog (in application window boundaries) in my UWP application, but can't seems to make it work. I tried with :
ContentDialog only shows vertically stretched with FullSizeDesired="True"
Popup, even trying to set the width and height in code behind its not working
Flyout Placement="Full" only stretch it vertically just like the contentdialog
Can't believe I spend so much time on that thing :(
Thanks
Have you tried something like this:
var c = Window.Current.Bounds;
var g = new Grid
{
Width = c.Width,
Height = c.Height,
Background = new SolidColorBrush(Color.FromArgb(0x20, 0, 0, 0)),
Children =
{
new Rectangle
{
Width = 100,
Height = 100,
Fill = new SolidColorBrush(Colors.White),
Stroke = new SolidColorBrush(Colors.Black),
StrokeThickness = 3
}
}
};
var p = new Popup
{
HorizontalOffset = 0,
VerticalOffset = 0,
Width = c.Width,
Height = c.Height,
Child = g
};
p.IsOpen = true; // open when ready
You should see a semi-transparent overlay with a white rectangle in the middle of your screen.
To make a popup Fullscreen I did the following. Hope this helps.
I have a user control I wanted to show as a popup. Its name "URLUserControl"
Step 1: UI of the UC (Just the first bit. Not complete code)
<UserControl>
<Grid>
<Popup x:Name="MPopup" VerticalAlignment="Center">
<Grid x:Name="MainGrid">
Step 2: UC constructor adds the following
private void InitURLUserControl()
{
MPopup.IsOpen = true;
Window.Current.SizeChanged += Current_SizeChanged;
MainGrid.Width = Window.Current.Bounds.Width;
MainGrid.Height = Window.Current.Bounds.Height;
}
Step 3:
private void Current_SizeChanged(object sender, WindowSizeChangedEventArgs e)
{
MainGrid.Width = Window.Current.Bounds.Width;
MainGrid.Height = Window.Current.Bounds.Height;
}
The above code will help the popup to be the center of the screen and display in fullscreen in size. Check it out. Happy coding!
I am using C# and I am creating UWP app.
I am using Windons.Ui.Xaml.Controls.Image and I have created follwoing code which lists my images
UxHelpers.DispatchToASTAThread(
async () =>
{
imageIndex++;
StackPanel stackPanel = new StackPanel();
stackPanel.Children.Add(image);
}
this.Results.Children.Add(stackPanel);
}).Forget();
This is in for loop, and I want when user clicks on certain image to be able to save it.
I have code for saving, I just don't know how to add mouse listener to each image, so that it is marked when I move mouse over it (So user knows that by clicking on it something will happen) and when he clicks I want it to call my function with this pictures index....
I have looked at UIElement but i still can't figure it out.
Thanks!!
We can add the PointerEntered event to the Image control that when the user move mouse over it then we can change the UI. Then we can add the Tapped event to the Image control, if the user click on it, it will be fired.
To get the index of the Image, we can set the index to the Name property of the Image.
For example:
protected override async void OnNavigatedTo(NavigationEventArgs e)
{
StackPanel stackPanel = new StackPanel();
for (int i = 0; i < 3; i++)
{
Windows.Storage.Streams.IRandomAccessStream random = await Windows.Storage.Streams.RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/sun2set.jpg")).OpenReadAsync();
Image image = new Image();
BitmapImage bitmapImage = new BitmapImage();
StackPanel mystackPanel = new StackPanel();
image.Name = i.ToString();
bitmapImage.SetSource(random);
image.Source = bitmapImage;
mystackPanel.Children.Add(image);
image.PointerEntered += Image_PointerEntered;
image.PointerExited += Image_PointerExited;
stackPanel.Children.Add(mystackPanel);
}
this.Results.Children.Add(stackPanel);
}
private void Image_PointerExited(object sender, PointerRoutedEventArgs e)
{
var image = sender as Image;
var parent = VisualTreeHelper.GetParent(image) as StackPanel;
parent.BorderBrush = new SolidColorBrush(Colors.Red);
parent.BorderThickness = new Thickness(0);
image.Tapped -= Image_Tapped;
}
private void Image_PointerEntered(object sender, PointerRoutedEventArgs e)
{
var image = sender as Image;
Debug.WriteLine("The" + image.Name + "is Selected!");
var parent = VisualTreeHelper.GetParent(image) as StackPanel;
parent.BorderBrush = new SolidColorBrush(Colors.Red);
parent.BorderThickness = new Thickness(5);
image.Tapped += Image_Tapped;
}
private void Image_Tapped(object sender, TappedRoutedEventArgs e)
{
var image = sender as Image;
//download the image
}
I load dinamically multiple images in flowLayoutPanel...and I wanna scroll the panel if necessary.
Here is my code:
private void carregarImagensToolStripMenuItem_Click(object sender, EventArgs e)
{
OpenFileDialog d = new OpenFileDialog();
// allow multiple selection
d.Multiselect = true;
// filter the desired file types
d.Filter = "JPG |*.jpg|PNG|*.png|BMP|*.bmp";
// show the dialog and check if the selection was made
if (d.ShowDialog() == DialogResult.OK)
{
foreach (string image in d.FileNames)
{
// create a new control
PictureBox pb = new PictureBox();
pb.Tag = tag;
btn.Tag = tag;
pb.MouseDown += pictureBox_MouseDown;
// assign the image
pb.Image = new Bitmap(image);
listaImagens.Add(new Bitmap(image));
// stretch the image
pb.SizeMode = PictureBoxSizeMode.StretchImage;
// set the size of the picture box
pb.Height = pb.Image.Height / 10;
pb.Width = pb.Image.Width / 10;
// add the control to the container
flowLayoutPanel1.Controls.Add(pb);
listaPicBoxes.Add(pb);
tag++;
}
}
}
You could always use the AutoScroll property:
flowLayoutPanel1.AutoScroll = true;
Set the FlowLayoutPanel's AutoScroll property to true
I'm trying to simulate an Android UI element that unfortunately doesn't exist in Windows 7 phone: ListPreference
I thought about using a Popup, that would take exactly the whole screen (to simulate a modal window).
So the popup would be made of the following elements:
Popup -> Canvas -> Border -> StackPanel -> RadioButtons
The Canvas would be fully transparent (or lightly whitish to clearly show that the element underneath aren't available)
The border would be made so it only big enough to contain all the RadioButtons
Then the StackPanel would be opaque and black.
Unfortunately, if I make the bottom canvas transparent, all children elements are also transparent. I can only make the elements more transparent.
The way transparency works is slightly different than with Android or iPhone (where it's quite easy to have a parent fully transparent, but opaque children).
Is there a way to make a parent fully transparent with the children opaque?
Or maybe someone could suggest another way to simulate a modal window.
Who knows, maybe someone even developed a ListPreference-like UIElement :)
Thank you
Here is how I ended up doing it.
It works in a similar fashion as ListPreference on Android. The constructor takes a string, an array of string and an int indicating which is the default value
When the windows is closed, the delegate Dismissed is called..
So you call it like so:
string[] choices = { "Choice 1", "Choice 2", "Choice3" };
ListPreference lp = new ListPreference("name", choices, 1);
lp.dismissed += new ListPreferences.DismissedHandler(lp_Dismissed);
the code:
public class ListPreference
{
Popup p;
string Name;
int oldValue;
public delegate void DismissedHandler(string name, bool changed, int newvalue);
public event DismissedHandler Dismissed;
public bool IsOpen
{
get
{
return p.IsOpen;
}
set
{
p.IsOpen = value;
}
}
public ListPreference(string name, Array elements, int default_value)
{
p = new Popup();
Name = name;
Dismissed = null;
oldValue = default_value;
double height = (App.Current.RootVisual as FrameworkElement).ActualHeight;
double width = (App.Current.RootVisual as FrameworkElement).ActualWidth;
p.VerticalOffset = SystemTray.IsVisible ? 32.0 : 0.0;
p.Height = height;
p.Width = width;
Canvas canvas = new Canvas();
SolidColorBrush colorBrush = new SolidColorBrush(Colors.Black);
colorBrush.Opacity = 0.75;
//Color.FromArgb(0xff, 0x8a, 0x8a, 0x8a));
canvas.Background = colorBrush;
//canvas.Opacity = 0.765;
canvas.Height = height;
canvas.Width = width;
p.Child = canvas;
Border border = new Border();
border.Width = width - 50.0 * 2.0;
border.BorderBrush = new SolidColorBrush(Colors.LightGray);
border.BorderThickness = new Thickness(5.0);
border.Background = new SolidColorBrush(Colors.Black);
canvas.Children.Add(border);
StackPanel panel2 = new StackPanel();
panel2.Orientation = System.Windows.Controls.Orientation.Vertical;
int i = 0;
foreach (string val in elements)
{
RadioButton radio1 = new RadioButton();
radio1.GroupName = "group1";
radio1.Content = val;
if (i == default_value)
radio1.IsChecked = true;
int j = i;
radio1.Click += (sender, args) => radio1_Checked(radio1, j);
i++;
panel2.Children.Add(radio1);
}
Button button1 = new Button();
button1.Background = new SolidColorBrush(Colors.Black);
button1.Foreground = new SolidColorBrush(Colors.White);
button1.Opacity = 1.0;
button1.Content = "Cancel";
button1.Margin = new Thickness(5.0);
button1.Click += new RoutedEventHandler(closeButton_Click);
panel2.Children.Add(button1);
border.Child = panel2;
// Open the popup.
p.IsOpen = true;
p.UpdateLayout();
border.Height = panel2.DesiredSize.Height + 5.0 * 2.0;
border.SetValue(Canvas.TopProperty, (height - border.Height) / 2.0);
border.SetValue(Canvas.LeftProperty, (width - border.Width) / 2.0);
p.UpdateLayout();
}
void closeButton_Click(object sender, RoutedEventArgs e)
{
// Close the popup.
p.IsOpen = false;
if (Dismissed != null)
{
Dismissed(Name, false, -1);
}
}
void radio1_Checked(object sender, int idx)
{
p.IsOpen = false;
if (Dismissed != null)
{
Dismissed(Name, idx != oldValue, idx);
}
}
}
I would suggest creating a Usercontrol that would do what you need. Set the LayoutRoot grid's background to PhoneSemitransparentBrush or changing the opacity will change the child element's opacity as well. Then your child elements can have any opacity you'd like. You can add this control as a child to the popup. Additionally, you can add doubleanimation to the popup with the opened and closed event triggers. Change the design height of the UserControl to 480x760 to simulate full page.
To answer your question. Using resources like PhoneSemitransparentBrush and TransparentBrush for the Canvas background is one of your options. Opacity will change the opacity of the whole UIElement including its children.