Silverlight 4 Transition Animations Between Adding/Removing Grid Child Elements - c#

I'm using the Silverlight Wizard control provided by this blog:
http://weblogs.asp.net/bryansampica/archive/2010/07/21/silverlight-4-0-wizard-custom-control.aspx
And I would like to add a transition between ActivePage changes...the way they are handled in the codebehind are like so:
public void manager_PropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
{
ContentHost.Children.Clear();
ContentHost.Children.Add(manager.ActiveStep);
HeaderText = manager.ActiveStep.StepHeaderText;
}
Is there any way to add an animation between the Clear & Add?
My apologies if this is a silly question!
Thanks!

One way to get the desired effect would be to launch a Storyboard which handles the visual transition, then listen on the Completed event to update the ContentHost.Children.
In a storyboard animate ContentHost.Opacity to 0
When the Storyboard.Completed event fires, execute the code in your manager_PropertyChanged() code block
Launch a second Storyboard to animate ContentHost.Opacity back to 1

Related

UWP CustomRenderer for Checkbox: Pointer over Checkbox changes style?

I'm working with Xamarin.Forms and I made a CustomRenderer for Checkbox in UWP. When I set all the Checkboxes of my items in the ListView to true by clicking the button "Alle", the Checkboxes are displayed correctly with the check inside the box:
However, if I hover my mouse over the Checkboxes, they immediately change their appearence (the check disappears but it's still selected). In the following screenshot, I moved my cursor over the 3rd - 7th Checkboxes:
This is my overridden OnElementChanged method in the CustomRenderer:
protected override void OnElementChanged(ElementChangedEventArgs<EvaCheckbox> e)
{
base.OnElementChanged(e);
var model = e.NewElement;
if (model == null)
{
return;
}
nativeCheckbox = new CheckBox();
CheckboxPropertyChanged(model, null);
model.PropertyChanged += OnElementPropertyChanged;
nativeCheckbox.Checked += (object sender, Windows.UI.Xaml.RoutedEventArgs eargs) =>
{
model.IsChecked = (bool)nativeCheckbox.IsChecked;
};
nativeCheckbox.Unchecked += (object sender, Windows.UI.Xaml.RoutedEventArgs eargs) =>
{
model.IsChecked = (bool)nativeCheckbox.IsChecked;
};
SetNativeControl(nativeCheckbox);
}
I tried to override the PointerEntered event of nativeCheckbox. It works, for example if I set the model.IsChecked to true on this event, it will be set to true:
nativeCheckbox.PointerEntered += (s, args) =>
{
model.IsChecked = true;
};
But I don't know how to (if even at this place) prevent the checkbox from changing it's appearance when moving the cursor above the Checkbox. Just leaving the triggered event with empty code like this won't change anything about the described behaviour:
nativeCheckbox.PointerEntered += (s, args) => { };
How can I prevent the Checkbox from changing it's appearance when I move my cursor over it?
Update:
I've created a sample project for this issue. You can find the repository here: https://github.com/Zure1/CustomCheckbox
It has the exact same described behavior. In the following screenshot I pressed the button "All" on the bottom of the screen and then the checkboxes look like correct with a check inside of them:
After moving the mouse cursor over the bottom 3 checkboxes, their change their appearance:
Information: I'm debugging on my desktop (Windows 10). I don't know if this issue exists on WinPhone. Just in case you're wondering why my checkboxes are red: My system color in Windows is red.
This is a tricky one as I have been struggling with this issue for a while, I'll try my best to answer this.
TL;DR: It's caused by ViewCell.
The issue comes down to Xamarin Forms ListView and ViewCell.
I haven't been able to track down the cause yet for many months and the way I get around this issue is by refreshing the ListView every time a change happens forcing a redraw of the entire ListView which can really impact performance.
My educated guess on what the cause could be is the rendering code for the ViewCell is missing something.
As for your particular issue, I have created a CheckBoxCell which you can use to display a list of checkboxes with a title. I forked your project and made the changes.
This will display something similar to what you are trying to achieve and doesn't have rendering issues so will be a good starting point. You are able to customize this to display images and the like but you'll have to do that in the platform-specific layout code.
Please note that I have only created the code for UWP and that should be enough to get you going for the other platforms.
I hope this helps somewhat.

WPF 'Toaster' Popup - How to close?

I'm using the following to create 'toaster' style pop-ups:
Create popup "toaster" notifications in Windows with .NET
Unfortunately, after the message "disappears", there is still a 'task' in the taskbar. After showing multiple popups, there is a separate 'task' for each popup that was opened, all stacked on top of each other.
How can I close these after the opacity animation has completed?
I wrote my own toast implementation, perhaps you can find use of it! It's very simple, all you do is:
ToastMessage.Show("My message", "My Title");
And you're done! :) I'll keep updating it until I think it's perfect, but modify it as you wish! I'm yet to add things like animations and sound effects.
Here is the link:
GitHub WPFToastMessage
I figured this out and it's pretty easy!
I changed this (minus space at beginning):
< Storyboard>
To this:
< Storyboard Completed="Storyboard_Completed">
Then in the 'properties' pane under events, I double-clicked the new event that was auto-added and got this:
private void Storyboard_Completed(object sender, EventArgs e)
{
}
And simply added:
this.Close();

How to End a Buttons ToolTip Display Programmatically

I have a button that launches a time intensive process. When the user hovers over this button a tool-tip is displayed, which is good. However, before this process gets re-routed onto a background thread (10 seconds or so for some stuff to take place) the tool-tip is displayed semi-transparent. I know this is awful coding and it should be put on to a non-UI thread ASAP, but this is the way it is for now...
My question is, how can I get a reference to the buttons tool-tip object so I can make it not visible? I envisage it to look like:
ToolTip someTT = Button.ToolTip; // This only gets or set the tool tip text.
someTT.Active = false;
someTT.Dispose(); // As a last resort.
Sorry guys, I aknowledge that I am a disgusting person for doing this.
Edit: The button is of the ComponantOne RibbonButton-type as part of the Studio for WinForms.
Usually, when you working with the ToolTip, you can find the following code within the Form.InitializeComponent() method:
this.toolTip1 = new System.Windows.Forms.ToolTip(this.components);
this.button1 = new System.Windows.Forms.Button();
//...
this.toolTip1.SetToolTip(this.button1, "Tooltip for button1");
Thus you can disable tooltip for the specific button using the same approach:
this.toolTip1.SetToolTip(this.button1, null);
You can also disable a button when the background thread have been started. This also avoids unnecessary the tooltips above this button:
void button1_Click(object sender, EventArgs e) {
toolTip1.Hide(button1);
button1.Enabled = false;
//start the background thread here
}
You have to work with the ToolTip control that you added to your project. Something like ToolTip.Active might work.
From above link:
With the Active property, you can enable or disable the display of
ToolTip text for all controls that have text specified by this
particular ToolTip component. Although more than one ToolTip component
can be created and assigned to a form, setting the Active property to
false only affects the current ToolTip.
If the UI thread is doing work then it won't matter if you find a way to hide the tool tip, it still won't take place until the UI thread is freed up again.
Your solution is what you always knew it would be, move the non-UI processing to a non-UI thread.

AutoCompleteComboBox Arrow Up/Arrow Down keys to scroll list

I created a simple AutoCompleteBox in my WPF app and it loads great with code intercepting the Populate event, but when the list pops up and I hit the arrow down key and get to the end of the list the vertical scroll bar doesn't scroll.
The values keep changing in the field like it is scrolling through them, but the scroll bar doesn't move.
If I use the mouse it scrolls fine.
I just need the arrow key to scroll it.
Any ideas/suggestions?
I am new to WPF and have searched forever for this fix.
Attach a SelectionChanged event and then, inside the handler:
private void AutoCompleteBox_OnSelectionChanged(object sender, SelectionChangedEventArgs e)
{
AutoCompleteBox box = (AutoCompleteBox)sender;
ListBox innerListBox = (ListBox) box.Template.FindName("Selector", box);
innerListBox.ScrollIntoView(innerListBox.SelectedItem);
}
I see the same behavior. I found a post on codeplex talking about a different issue but at the bottom of the post they have a class AutoCompleteBoxEx that supports ScrollIntoView, so you can hook up the SelectionChanged even and this should get you the behavior you want. I have no idea why this is not baked in. I have had a chance to test out the posted code.
Update
Just pasted the code from the post into a class and used it in the XAML by changing AutoCompleteBox to AutoCompleteBoxEx and adding namespace for AutoCompleteBoxEx and it worked fine. You don't have to specify any event in the XAML, nor do you need to add any code to the code behind.

Paragraph.BringIntoView() works only when focused

I am working on a text editor that is based on RichEditBox. I have implemented functionality "Go to line" which eventually resolves to
TextPointer.Paragraph.BringIntoView();
Along with this I also set the caret position.
What I found out is that BringIntoView only works when I click on the RichEditBox first (focus it). Otherwise it seems to get ignored. I can see that the caret position has been adjusted by the code around BringIntoView though.
Does anybody know what is the reason/nature of that problem? How can I overcome it?
Found a workaround for this, not sure if it will work in a pure WPF environment, in my case I'm running WPF inside a mainly Windows Forms solution using WPF UserControls where needed.
Instead of invoking BringIntoFocus() immediately, defer it to a later moment by adding it to a queue that gets handled by a timer. For example:
System.Windows.Forms.Timer DeferredActionTimer = new System.Windows.Forms.Timer() { Interval = 200 };
Queue<Action> DeferredActions = new Queue<Action>();
void DeferredActionTimer_Tick(object sender, EventArgs e) {
while(DeferredActions.Count > 0) {
Action act = DeferredActions.Dequeue();
act();
}
}
In your forms constructor, or in the OnLoad event add:
DeferredActionTimer.Tick += new EventHandler(DeferredActionTimer_Tick);
DeferredActionTimer.Enabled = true;
Finally, instead of calling TextPointer.Paragraph.BringIntoView(); directly, call it like this:
DeferredActions.Enqueue(() => TextPointer.Paragraph.BringIntoView());
Note that the Windows Forms timer kicks events off in the main thread (via the message pump loop). If you have to use another timer you need a bit of extra code. I'd recommend you to use System.Timers.Timer rather than the System.Threading.Timer (it's a little more thread-safe). You would also have to wrap the action in a Dispatcher.Invoke structure. In my case, the WinForms timer works like a charm.
Can't you just give the RichTextBox(?) focus first then, using Keyboard.Focus(richTextBox) or richTextBox.Focus()?

Categories