I'm making a program for Windows 8 in WinRT and I'm having some trouble with the Popup-class.
The content in the popup has a fancy intro-animation when it is opened. I'd like to animate the content in the popup right before it closes, but haven't found out how.
Any ideas?
Thanks in advance
EDIT: This is an example for what I'm trying to do. The Closed-eventhandler is obviously too late for doing anything before it closes. But you get the point.
Popup popup = new Popup();
SolidColorBrush brush = new SolidColorBrush(Colors.Red);
Ellipse ell = new Ellipse() { Fill = brush, Width = 300, Height = 300 };
popup.Child = ell;
popup.Opened += (sender, e) =>
{
ColorAnimation anim = new ColorAnimation() { To = Colors.Blue };
Storyboard.SetTarget(anim, brush);
Storyboard.SetTargetProperty(anim, "Color");
Storyboard sb = new Storyboard();
sb.Children.Add(anim);
sb.Begin();
};
popup.Closed += (sender, e) =>
{
ColorAnimation anim = new ColorAnimation() { To = Colors.Green };
Storyboard.SetTarget(anim, brush);
Storyboard.SetTargetProperty(anim, "Color");
Storyboard sb = new Storyboard();
sb.Children.Add(anim);
sb.Begin();
};
popup.IsOpen = true;
The problem here is that the popup has only 2 visibility states (isopen =true/false). when IsOpen is set to false (i.e. closed) the popup's visibility is set to Collapsed and the animation is not played. What I would suggest is:
The popup obviously has a close button to close it, right? So in that close button's click event, start the animation. Then listen to the completed event on the storyboard and set the popup.IsOpen=false there
sb.Completed += SomeEventHandler
Related
This is the scenario:
I Have a Grid and an Button. the Grid have a Show Boolean property. When user click on button, if Show=false then Grid become Visible. and when Show=true Grid become Collapse.
when it's visibility change, I do an animation for grid's Height with StoryBoard.
OK. every thing is fine. when user click the button, Grid appearing with animation. but when click again, the animation doesn't show and just Collapse occurred.
This is my code:
Storyboard growUpStory = new Storyboard();
Storyboard growDownStory = new Storyboard();
DoubleAnimation growUp, growDown;
In any method:
height = Container.DesiredSize.Height;
growUp = new DoubleAnimation
{
From = 0,
To = height > MaxHeight ? MaxHeight : height,
Duration = new Duration(TimeSpan.FromSeconds(1)),
AutoReverse = false
};
Container.Visibility = Visibility.Collapsed;
growDown = new DoubleAnimation
{
From = height > MaxHeight ? MaxHeight : height,
To = 0,
Duration = new Duration(TimeSpan.FromSeconds(1)),
AutoReverse = false
};
growUpStory.Children.Add(growUp);
growDownStory.Children.Add(growDown);
and when I invoke the event:
if (Show)
{
Storyboard.SetTarget(growUpStory, Container);
Storyboard.SetTargetProperty(growUpStory, new PropertyPath(Grid.HeightProperty));
growUpStory.Begin();
Container.Visibility = Visibility.Visible;
}
else
{
Storyboard.SetTarget(growDownStory, Container);
Storyboard.SetTargetProperty(growDownStory, new PropertyPath(Grid.HeightProperty));
growDownStory.Begin();
Container.Visibility = Visibility.Collapsed;
}
I Try many ways but was unable to resolve. Where is my problem? have you any idea? thanks.
I Can't use XAML here
Animations are asynchronous, which means you are collapsing the Visibility at the same time that you are starting the "growDownStory" animation.
Add some delay, based on how long you expect your "growDownStory" animation to run.
Example:
growDownStory.Begin();
await Task.Delay(1000); // allow time for the animation to perform its visual
Container.Visibility = Visibility.Collapsed;
I have a UWP app project and I am trying to add a couple of DoubleAnimations and I am using below code:
private static void CreateStoryboardAnimation(StackPanel sp, ItemHelper item, EnumHelper.AddRemoveFavorites favType)
{
var image = (Image)sp.FindName("ImageView");
var tb = (TextBlock)sp.FindName("FavStatusTB");
if (image != null)
{
image.RenderTransform = new CompositeTransform();
//tb.RenderTransform = new CompositeTransform();
Storyboard tbStory = new Storyboard();
var tbAnimateOpacity = new DoubleAnimation()
{
From = 1.0,
To = 0.0,
Duration = new Duration(TimeSpan.FromMilliseconds(500)),
};
Storyboard.SetTarget(tbAnimateOpacity, tb);
Storyboard.SetTargetProperty(tbAnimateOpacity, "Opacity");
tbStory.Children.Add(tbAnimateOpacity);
Storyboard storyboard1 = new Storyboard();
storyboard1.Completed += async delegate
{
// set text
if (favType == EnumHelper.AddRemoveFavorites.Add)
{
tb.Text = "Added to favorites";
}
else
{
tb.Text = "Removed from favorites";
}
await Task.Delay(500);
// run 2nd animation
var storyboard2 = new Storyboard();
var translateYAnimation2 = new DoubleAnimation()
{
From = -20,
To = 0,
Duration = new Duration(TimeSpan.FromMilliseconds(700)),
};
Storyboard.SetTarget(translateYAnimation2, image);
Storyboard.SetTargetProperty(translateYAnimation2, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
storyboard2.Children.Add(translateYAnimation2);
storyboard2.Begin();
tbStory.Begin();
};
DoubleAnimation translateYAnimation = new DoubleAnimation()
{
From = 0,
To = -20,
Duration = new Duration(TimeSpan.FromMilliseconds(500))
};
Storyboard.SetTarget(translateYAnimation, image);
Storyboard.SetTargetProperty(translateYAnimation, "(UIElement.RenderTransform).(CompositeTransform.TranslateY)");
storyboard1.Children.Add(translateYAnimation);
storyboard1.Begin();
}
}
The first time I run the animation it works fine but after that it doesn't. This code gets applied on GridView items as you can see below:
The image animation works fine, it goes up and then the TextBlock animation runs poorly. It is supposed to display the text for 500 milliseconds but it shows the text and then starts the animation to make the opacity go zero.
I want this text to be visible to the user for at least 500 milliseconds and then the animation should start. Is there something that I am missing? I also tried BeginTime property of DoubleAnimation but to no avail. Please share your suggestions. Thanks
I think the problem is with the fact that you are starting the opacity animation inside the Completed handler of the first "slide up" animation. It works the first time, because the Opacity of the TextBlock is 1.0, but after the first round it is 0.0 and flips to 1.0 only after the await Task.Delay(500); finishes. The easiest fix would be to set the opacity right after the if:
if (image != null)
{
tb.Opacity = 1; //add this line
...
I have an Xceed (Xceed.Wpf.Toolkit) Child window that I am creating in my WPF Window's Code Behind, which is working the way I would expect.
private void CustomerNotesPopup(string text, string caption)
{
TextBlock tbCustomerNotes = new TextBlock()
{
Text = text,
Margin = new Thickness(10),
TextWrapping = TextWrapping.Wrap,
FontSize = 20
};
Button btnConfirm = new Button()
{
Width = 150,
FontWeight = FontWeights.Bold,
Height = 59,
Content = "Confirm",
FontSize = 22,
Background = Brushes.Black,
Foreground = Brushes.White,
BorderBrush = Brushes.Black
};
btnConfirm.Click += btn_Click;
StackPanel sp = new StackPanel()
{
Orientation = Orientation.Vertical,
Margin = new Thickness(5)
};
sp.Children.Add(tbCustomerNotes);
sp.Children.Add(btnConfirm);
Xceed.Wpf.Toolkit.ChildWindow pop = new Xceed.Wpf.Toolkit.ChildWindow()
{
Height = 550,
Width = 550,
IsModal = true,
Content = sp,
WindowStartupLocation = Xceed.Wpf.Toolkit.WindowStartupLocation.Center,
Caption = caption,
Name = "PopUpWindow"
};
cgcanvas.Children.Add(pop);
pop.Show();
}
Now I am trying to wire up the btnConfirm.Click += btn_Click; event to close the pop up when the button is clicked. I have tried several different methods of finding the Xceed Child name and closing it but haven't been able to find the name and close it on command.
I think I am close with this but so far I still haven't figure out how to get and close it in code.
private void btn_Click(object sender, RoutedEventArgs e)
{
//foreach (Xceed.Wpf.Toolkit.ChildWindow popwindow in Application.Current.Windows)
//{
// //if (window.Name == "PopUpWindow")
// //{
// // window.Close();
// popwindow.Close();
// //}
//}
for (int i = 0; i < VisualTreeHelper.GetChildrenCount(cgcanvas); i++)
{
var nameCheck = VisualTreeHelper.GetChild(cgcanvas, i) as Xceed.Wpf.Toolkit.ChildWindow;
//if (nameCheck.Name == "PopUpWindow")
//{
// MessageBox.Show("Yes");
//}
}
}
By using the suggestion provided by Bob in the comments I was able to register and find the name of Xceed pop up window. I ended up putting the code block in a class file by itself so the register wasn't needed after all. However, I wouldn't have made it to that point without the suggestion.
To finish the task I used Find all controls in WPF Window by type to find the Xceed control on the parent and then close it out by its name.
I use WebBrowser in some DLL to make screenshots.
The main problem that it is not maximized sometimes and I guess it takes settigns of the Internet Explorer.
So my question is how to maximize WebBrowser control via C#?
Thank you!
Rectangle r = new Rectangle();
r.X = cropToRectangle.X;
r.Y = cropToRectangle.Y;
r.Width = cropToRectangle.Width;
r.Height = cropToRectangle.Height;
Point p = new Point();
p.X = scrollTo.X;
p.Y = scrollTo.Y;
var sb = Math.Max(SystemInformation.VerticalScrollBarWidth, SystemInformation.HorizontalScrollBarHeight);
var size = new Size(Screen.PrimaryScreen.WorkingArea.Width, Screen.PrimaryScreen.WorkingArea.Height);
using (var form =
new FocuslessForm
{
Width = size.Width + sb,
Height = size.Height + sb,
Padding = new Padding(0),
Margin = new Padding(0),
FormBorderStyle = FormBorderStyle.None,
Opacity = 0,
TabStop = false,
ShowInTaskbar = false
})
{
var webBrowser1 = new WebBrowser
{
Padding = new Padding(0),
Margin = new Padding(0),
Dock = DockStyle.Fill,
Url = url,
TabStop = false
};
form.Controls.Add(webBrowser1);
var finished = false;
webBrowser1.DocumentCompleted += delegate
{
webBrowser1.Document.Window.ScrollTo(p);
finished = true;
};
form.Show();
while (!finished)
{
Application.DoEvents();
}
image = CaptureBrowserScreenshot(webBrowser1, r);
form.Close();
}
Well, the WebBrowser is a control that is embedded into your own program's window; it doesn't launch IE as a separate process (though it does hook into IE for the renderer and other critical code). So, the control's location and size is dependent on where you embed it.
I see you are fill-docking the control to the form. This is a good first step. Now, you must make sure the WebBrowser control is being added to the Controls hierarchy of the Form (so it'll show up), and then you must maximize that Form. The way to do this is to set the WindowState property of the Form to WindowState.Maximized.
I implemented Form resize event, when form is maximize, i set web browser size to form size.
It worked well in my app, I share for whom concern.
private void Form1_Resize(object sender, EventArgs e)
{
webBrowser1.Size = this.Size;
}
I'm trying to set an image background in code-behind. I tried adding a background image to the button, but as soon as I hover over the button, the image disappears. To solve this, I have to write functions to override the button behavior, which is too much to do in code-behind.
I then use an alternative method, that is to add a button and an image separately to a grid cell. The issue is -- when I click on the image, the button won't trigger.
How do I make the button to have the hover and pressed effect, even when, the mouse is either hovering or presses the image on the button, but not the remaining area of the button?
Or hope someone can suggest me a better solution.Below is my code.
InitializeComponent();
Button playBtn = new Button();
playBtn.Width = 60;
playBtn.Height = 30;
Image playIcon = new Image();
playIcon.Source = new BitmapImage(new Uri(#"PATH"));
playIcon.Stretch = Stretch.Uniform;
playIcon.Height = 25;
grid1.Children.Add(playBtn);
grid1.Children.Add(playIcon);
Grid.SetColumn(playBtn, 0);
Grid.SetRow(playBtn, 0);
Grid.SetColumn(playIcon, 0);
Grid.SetColumn(playIcon, 0);
thanks for everyone input, after digging more into it, it sort of work out. What I did is add a Grid to Button.Content then add the image to the Grid. And using Opacity to add the grey out effect for IsEnable false state. Below I post my code, hope someone find it useful or improve on:
Button playBtn = new Button();
Image playIcon = new Image();
public MainWindow()
{
InitializeComponent();
Grid grid2 = new Grid();
RowDefinition grid2_row1 = new RowDefinition();
ColumnDefinition grid2_col1 = new ColumnDefinition();
grid2.RowDefinitions.Add(grid2_row1);
grid2.ColumnDefinitions.Add(grid2_col1);
playBtn.Width = 60;
playBtn.Height = 30;
playBtn.Click += playBtn_Click;
playIcon.Source = new BitmapImage(new Uri(#"pack://PATH..."));
playIcon.Stretch = Stretch.Uniform;
playIcon.Height = 25;
playBtn.Content = grid2;
grid2.Children.Add(playIcon);
grid1.Children.Add(playBtn);
Grid.SetRow(playIcon, 0);
Grid.SetColumn(playIcon, 0);
}
public void playBtn_Click(object sender, RoutedEventArgs e)
{
MessageBox.Show("Hello");
}
private void button1_Click(object sender, RoutedEventArgs e)
{
playBtn.IsEnabled = false;
playIcon.Opacity = 0.3;
}
Buttons in WPF have different states = "normal", "mouse over" and "pressed" are three.
When you create the button you are setting up it's "normal" state. You also need to set the "mouse over" state to have the same image as well.
Check the below links
http://blogs.msdn.com/b/knom/archive/2007/10/31/wpf-control-development-3-ways-to-build-an-imagebutton.aspx
http://www.hardcodet.net/2009/01/create-wpf-image-button-through-attached-properties
http://social.msdn.microsoft.com/Forums/en-US/wpf/thread/91df562f-414c-4326-ac65-42ef301b5f8f/