I am populating my Accordion with items from my database. I have also wrapped my Accordion in a ScrollViewer:
<ScrollViewer Name="LayoutScrollViewer">
<toolkit:Accordion Name="ItemsAccordion" ItemTemplate="{StaticResource AccordionHeaderTemplate}" ContentTemplate="{StaticResource AccordionContentTemplate}"></toolkit:Accordion>
</ScrollViewer>
However, I cannot find a way to initially show the VerticalOffset of the ScrollViewer to 0. It keeps on scrolling to the bottom whenever my database content is finished loading. I have tried in the codebehind:
void CatalogItem_Loaded(object sender, RoutedEventArgs e)
{
WebServiceClient client = new WebServiceClient();
client.GetCatalogItemsAsync(countID);
client.GetCatalogItemsCompleted += new EventHandler<GetCatalogItemsCompletedEventArgs>(client_GetCatalogItemsCompleted);
}
void client_GetCatalogItemsCompleted(object sender, GetCatalogItemsCompletedEventArgs e)
{
ItemsAccordion.ItemsSource = e.Result;
UpdateScrollViewer();
}
private void UpdateScrollViewer()
{
LayoutScrollViewer.ScrollToVerticalOffset(0);
}
This doesn't work, though. I have also tried, in UpdateScrollViewer() to do:
LayoutScrollViewer.IsHitTestVisible = false;
LayoutScrollViewer.IsHitTestVisible = true;
which doesn't work either. If I leave it as IsHitTestVisible= false, then it works as I would like; but I also want user interaction with the Accordion, so this isn't a permanent solution.
I hate to do this but thy the following:
void client_GetCatalogItemsCompleted(object sender, GetCatalogItemsCompletedEventArgs e)
{
ItemsAccordion.ItemsSource = e.Result;
UpdateLayout();
UpdateScrollViewer();
}
Related
I have a C# WPF application with a User Control displayed inside a ScrollViewer:
<ScrollViewer HorizontalScrollBarVisibility="Auto" PreviewMouseWheel="ScrollViewer_PreviewMouseWheel" MouseWheel="ScrollViewer_MouseWheel">
<Drawing:DrawingWindow Name="Drawing" MouseWheel="Drawing_MouseWheel" PreviewMouseWheel="Drawing_PreviewMouseWheel"/>
</ScrollViewer>
I've tried putting an event-handler for all scroll-related events both on the contained element and the ScrollViewer itself. Each of the handlers is basically just this:
private void Drawing_MouseWheel(object sender, MouseWheelEventArgs e)
{
e.Handled = true;
}
private void ScrollViewer_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
e.Handled = true;
}
private void Drawing_PreviewMouseWheel(object sender, MouseWheelEventArgs e)
{
e.Handled = true;
}
private void ScrollViewer_MouseWheel(object sender, MouseWheelEventArgs e)
{
e.Handled = true;
}
Even with all this, the vertical scroll-bar still responds to the mouse-wheel when I scroll on top of the Drawing element.
What am I doing wrong? I've seen a lot of posts where setting e.handled appears to be the solution:
Disable mouse wheel scrolling in scrollviewer
Using WPF: A Simple Color Picker With Preview, Sacha Barber, 18 Apr 2012 ,
I created a custom control from it:
public class ColorCustomControl : Control
{....}
It is then used as:
<Menu....>
<MenuItem.....>
<pn:ColorCustomControl/>
</MenuItem>
</Menu>
This yields the following picture when the Brushes MenuItem is selected:
Selection of any item in the opened Brushes submenu results in the appropriate action being taken with the Brushes submenu REMAINING OPEN. This is the effect I want.
However, as shown below, selection of any of the three swatches results in a quick flicker of the new swatch -- it replaces the color pattern to the left of "Preview"--followed immediately by closure of the Brushes submenu.
If the Brushes menuitem is again chosen, the most recently selected swatch correctly appears.
I have tried all preview events (i.e., keyboard lost focus, left mouse down, etc.), to try stopping closure of the submenu when a swatch is chosen. Nothing I have found will stop the popup from closing.
How can closure of the Brushes submenu be prevented when selecting a swatch from the visual?
(I strongly suspect that redrawing of the visual, as in InvalidateVisual() when a new swatch image is selected, is forcing closure of the submenu).
Any ideas anybody?
TIA
My suggestion is to stop events propagation from your user control. So in your ColorCustomControl class first of all add a property (it can be a dependency one too if you need):
private bool propagateEvents = true;
public bool PropagateEvents
{
get
{
return propagateEvents;
}
set
{
propagateEvents = value;
}
}
Then add e.Handled = !PropagateEvents; at the end of every mouse event handler; in the end add a Swatch_MouseLeftButtonUp method (it has to handle the event raised by ImgSqaure1, ImgSqaure2 and ImgCircle1).
The result will be:
private void Swatch_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
Image img = (sender as Image);
ColorImage.Source = img.Source;
e.Handled = !PropagateEvents;
}
private void Swatch_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
e.Handled = !PropagateEvents;
}
private void CanvImage_MouseDown(object sender, MouseButtonEventArgs e)
{
IsMouseDown = true;
e.Handled = !PropagateEvents;
}
private void CanvImage_MouseUp(object sender, MouseButtonEventArgs e)
{
IsMouseDown = false;
e.Handled = !PropagateEvents;
}
and in the user control XAML:
<Image x:Name="ImgSqaure1"
Height="20" Width="20"
Source="Images/ColorSwatchSquare1.png"
Margin="45,0,0,0"
ToolTip="Square swatch1"
MouseLeftButtonDown="Swatch_MouseLeftButtonDown"
MouseLeftButtonUp="Swatch_MouseLeftButtonUp"/>
<Image x:Name="ImgSqaure2"
Height="20" Width="20"
Source="Images/ColorSwatchSquare2.png" Margin="5,0,0,0"
ToolTip="Square swatch2"
MouseLeftButtonDown="Swatch_MouseLeftButtonDown"
MouseLeftButtonUp="Swatch_MouseLeftButtonUp"/>
<Image x:Name="ImgCircle1" Height="20" Width="20"
Source="Images/ColorSwatchCircle.png" Margin="5,0,0,0"
ToolTip="Circle swatch1"
MouseLeftButtonDown="Swatch_MouseLeftButtonDown"
MouseLeftButtonUp="Swatch_MouseLeftButtonUp" />
Now all you have to do is set the PropagateEvents property in your menu:
<Menu....>
<MenuItem.....>
<pn:ColorCustomControl PropagateEvents="False" />
</MenuItem>
</Menu>
I hope it can help you.
Here is a setup: I have a textbox with a numberic value. According to the requirements every time anybody changes that value an accompanying comment needs to be provided. So visually there must be another textbox for the comment that should be displayed right next to the first one. Ideally the comment textbox needs to be placed in a callout that originates from the value textbox and displayed on the right from it overlaying anything what's underneath of it just like on this picture:
I know how to do easily it in CSS and HTML.
I have to do the same in Silverlight now.
Unfortunately I am not very strong in it, so what I am specifically asking about is how having 2 textboxes make one of them appear next to another (on the right overlaying whatever controls are underneath it) with as less XAML and code as possible.
Use a ToolTip, and set the Placement such that it appears to the right. in XAML, you can template your ToolTip to look however you want, even if that means mimicking the TextBox appearance.
This is the purpose of the ToolTip, and I feel strongly that you should always use the right tool for the right job. :)
I hope this helps. Let us know if you need code samples.
EDIT: Added the following code samples:
<TextBox ToolTipService.Placement="Right">
<ToolTipService.ToolTip>
<TextBox Text="{Binding CalloutText, Mode=OneWay}" IsReadOnly="True"/>
</ToolTipService.ToolTip>
</TextBox>
Ok, I ended up writing my own behaviour
namespace MyNamespace
{
public class CommentBehavior : Behavior<TextBox>
{
private readonly TimeSpan howLongWeWaitBeforePopupCloses = TimeSpan.FromMilliseconds(200);
private DispatcherTimer popupClosingTimer;
public static DependencyProperty PopupProperty = DependencyProperty.Register("Popup", typeof(Popup), typeof(CommentBehavior), new PropertyMetadata(null));
public Popup Popup
{
get { return (Popup)this.GetValue(PopupProperty); }
set { this.SetValue(PopupProperty, value); }
}
protected override void OnAttached()
{
this.popupClosingTimer = new DispatcherTimer();
this.popupClosingTimer.Stop();
this.popupClosingTimer.Interval = howLongWeWaitBeforePopupCloses;
this.popupClosingTimer.Tick += this.ClosePopup;
this.AssociatedObject.GotFocus += this.GotFocus;
this.AssociatedObject.LostFocus += this.LostFocus;
this.Popup.Child.GotFocus += PopupChild_GotFocus;
this.Popup.Child.LostFocus += PopupChild_LostFocus;
}
private void PopupChild_LostFocus(object sender, RoutedEventArgs e)
{
this.popupClosingTimer.Start();
}
private void PopupChild_GotFocus(object sender, RoutedEventArgs e)
{
this.popupClosingTimer.Stop();
}
protected override void OnDetaching()
{
this.AssociatedObject.GotFocus -= this.GotFocus;
this.AssociatedObject.LostFocus -= this.LostFocus;
this.Popup.GotFocus -= PopupChild_GotFocus;
this.popupClosingTimer.Tick -= this.ClosePopup;
this.popupClosingTimer = null;
}
private void ClosePopup(object sender, EventArgs e)
{
this.Popup.IsOpen = false;
this.popupClosingTimer.Stop();
}
protected void GotFocus(object sender, RoutedEventArgs e)
{
this.popupClosingTimer.Stop();
this.Popup.IsOpen = true;
var at = this.CalculatePopupPosition();
this.Popup.HorizontalOffset = at.X;
this.Popup.VerticalOffset = at.Y;
}
private Point CalculatePopupPosition()
{
var owner = this.AssociatedObject;
var transformation = owner.TransformToVisual(Application.Current.RootVisual);
var at = transformation.Transform(new Point(owner.ActualWidth, 0));
return at;
}
protected void LostFocus(object sender, RoutedEventArgs e)
{
this.popupClosingTimer.Start();
}
}
}
And the following XAML
<Grid x:Name="LayoutRoot" Background="White">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<StackPanel Grid.Row="0" Background="Red">
<TextBox Width="200" Text="0.01">
<i:Interaction.Behaviors>
<local:CommentBehavior>
<local:CommentBehavior.Popup>
<Popup>
<TextBox Text="Comment" />
</Popup>
</local:CommentBehavior.Popup>
</local:CommentBehavior>
</i:Interaction.Behaviors>
</TextBox>
</StackPanel>
</Grid>
I have a problem with bubbeling events. I manage to bubble events in borders, grid, stackpanel, but not in a ScrollViewer
If you look at the example below you will notice that when you click the TextBlock the event is bubbeled up to the Grid. But when I include the ScrollViewer the event stops here and is not sent up to the Grid.
Does anyone now whay this happends and if it can be fixed? I really need to be able to bubble events through a ScrollViewer as I use it all the time.
<Grid MouseLeftButtonDown="Grid_MouseLeftButtonDown">
<!--<ScrollViewer MouseLeftButtonDown="ScrollViewer_MouseLeftButtonDown">-->
<StackPanel Orientation="Vertical" MouseLeftButtonDown="StackPanel_MouseLeftButtonDown">
<TextBlock Text="Click me to bubble an event" MouseLeftButtonDown="TextBlock_MouseLeftButtonDown"/>
</StackPanel>
<!--</ScrollViewer>-->
</Grid>
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();
}
private void Grid_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MessageBox.Show("LayoutRoot clicked");
}
private void ScrollViewer_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MessageBox.Show("ScrollViewer clicked");
e.Handled = false;
}
private void StackPanel_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MessageBox.Show("StackPanel clicked");
e.Handled = false;
}
private void TextBlock_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
MessageBox.Show("Textblock clicked");
e.Handled = false;
}
}
use AddHandler(yourDelegate, True); syntax for adding event handlers, which will ignore Handled flag set by other controls in the visual tree.
I had this problem and the fix posted by user572559 fixed my issue. For those that need it, below is what I did (modified for posting):
_scrollViewer = new ScrollViewer();
_scrollViewer.AddHandler(
ScrollViewer.MouseLeftButtonDownEvent,
new MouseButtonEventHandler(OnMouseLeftButtonDown),
true);
_scrollViewer.AddHandler(
ScrollViewer.MouseLeftButtonUpEvent,
new MouseButtonEventHandler(OnMouseLeftButtonUp),
true);
...
void OnMouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
...
}
void OnMouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
...
}
Also note that if you hare handling these you may be handling MouseMove as well. MouseMove worked for me without needing to do this, and it also does not seem to be supported in this fashion (not a bubbling event).
You can prevent e.Handled on MouseButtonEventArgs by overriding ScrollViewer like this
public sealed class ClickScrollViewer : ScrollViewer
{
protected override void OnMouseLeftButtonDown(MouseButtonEventArgs e)
{
this.Focus();
}
}
I've been looking at the following example on how to style the ComboBox, but I haven't been able to create a focus effect when going into an editable combo box. Whenever the ComboBox receives focus, it should go into edit mode and the component should have a focus style.
The basic problem is that whenever I go into the edit mode, it's not the surrounding ComboBox which actually has the focus, but the text subcomponent and I haven't been able to create a Trigger on the text component which modifies the ComboBox's border style since I don't know how to refer to the parent component from the trigger.
I've tried adding ControlTemplate Trigger on the TextBox, or style trigger. I've tried to refer to the ComboBox by name or by using the TemplateBinding option, but without any luck. A simple example would be very appreciated.
Bind IsKeyboardFocusWithin to IsDropDownOpen
<ComboBox ItemsSource="{Binding SortedItems}"
StaysOpenOnEdit="True"
IsDropDownOpen="{Binding IsKeyboardFocusWithin, RelativeSource={RelativeSource Self}, Mode=OneWay}" />
private void cmbSpecialHandling_GotFocus(object sender, RoutedEventArgs e)
{
Thickness th = new Thickness(2);
cmbSpecialHandling.BorderThickness = th;
cmbSpecialHandling.BorderBrush = this.FindResource("TabFocusColor") as SolidColorBrush;
}
private void cmbSpecialHandling_GotKeyboardFocus(object sender, KeyboardFocusChangedEventArgs e)
{
Thickness th = new Thickness(2);
cmbSpecialHandling.BorderThickness = th;
cmbSpecialHandling.BorderBrush = this.FindResource("TabFocusColor") as SolidColorBrush;
}
private void cmbSpecialHandling_LostFocus(object sender, RoutedEventArgs e)
{
cmbSpecialHandling.BorderBrush = Brushes.Transparent;
}
Set the border brush of combobox in its Gotfocus and make it transparent in lost focus:
private void comboBox_GotFocus(object sender, RoutedEventArgs e)
{
Thickness th = new Thickness(2);
comboBox.BorderThickness = th;
comboBox.BorderBrush = this.FindResource("TabFocusColor") as SolidColorBrush;
or
comboBox.BorderBrush = Brushes.Green;
}
private void comboBox_LostFocus(object sender, RoutedEventArgs e)
{
comboBox.BorderBrush = Brushes.Transparent;
}