WinRT: Scroll Listview to item - xaml

I want to scroll my ListView to some item. But I want to trigger scroll from view model.
The problem is that Scroll of list can be done only in code behind.
The question is how from view model call method in codebehind that scrolls ListView.

In these cases I create event in ViewModel like this:
public delegate void FooHandler();
public event FooHandler FooEvent;
which I invoke at the right time:
FooEvent.Invoke();
Then in View i register handler function like this:
(DataContext as FooViewModel).FooEvent += OnFooHandler;

Related

Cannot get the selected item in a ListViewer in a JFace Dialog

I created a dialog class that inherited from JFace Dialog using Windows Builder. In that, I added some controls included a button and a JFace ListViewer. In widgetSelected() function of the button, I can get out the selected item in the ListViewer. But in `okPressed(), I cannot get this. I don't know why. Can you help me?
Thanks!
If you want to access UI elements in okPressed you must do so before calling super.okPressed() because that will close the dialog and dispose of the controls. So something like:
#Override
protected void okPressed()
{
IStructuredSelection sel = viewer.getStructuredSelection();
// TODO deal with selection
// Call super.okPressed() last
super.okPressed();
}
Alternatively save the selection when your widgetSelected is called.

Reaching a control, within a ContentControl from view's code behind

My view's XAML is only containing a custom control.
A bit further, in a Resource Dictionary, I have a Style for this custom control, and inside this, I have a TextBox. My goal would be to reach this TextBox from the view's code behind, and set it's focus, when the view's DataContext changed.
I tried to use x:Name to give a name to the custom control on the view's XAML, and also give a name to the TextBox inside the control's style (so essentially trying to reach it from code behind like: this.MyCustomControl.SearchTextBox). This did not work.
What would be the best practice to solve this issue?
This is what I would do.
Create a TemplatePart attribute on top of your custom control for the TextBox.
[TemplatePart(Name = "YourTextBoxName", Type = typeof(TextBox))]
Then inside the OnApplyTemplate override method, get a reference of the TextBox.
// You might want to add property error handling here
// so if the TextBox is not found, throw an exception.
// Doing so forces other people will have to implement
// the SAME PART in their own stylings.
_textBox = (TextBox)GetTemplateChild("YourTextBoxName");
Then all you need is to create a public method SetFocus that your code behind class can have access to.
public void SetFocus() => _textBox.Focus(FocusState.Programmatic);
Try visual tree helper
VisualTreeHelper.GetChild(object, index)
msdn link

UWP Light dismiss ContentDialog

Is there a way to make the ContentDialog light dismiss?, so when the user clicks on any thing outside the ContentDialog it should be closed.
Thanks.
By default, ContentDialog is placed in PopupRoot. Behind it, there is a Rectangle which dim and prevent interaction with other elements in the app. You can find it with help of VisualTreeHelper and register a Tapped event to it, so when it's tapped you can hide ContentDialog.
You can do this after calling ShowAsync outside ContentDialog code or you can do it inside ContentDialog code. Personally, I implement a class which derives from ContentElement and I override OnApplyTemplate like this:
protected override void OnApplyTemplate()
{
// this is here by default
base.OnApplyTemplate();
// get all open popups
// normally there are 2 popups, one for your ContentDialog and one for Rectangle
var popups = VisualTreeHelper.GetOpenPopups(Window.Current);
foreach (var popup in popups)
{
if (popup.Child is Rectangle)
{
// I store a refrence to Rectangle to be able to unregester event handler later
_lockRectangle = popup.Child as Rectangle;
_lockRectangle.Tapped += OnLockRectangleTapped;
}
}
}
and in OnLockRectangleTapped:
private void OnLockRectangleTapped(object sender, TappedRoutedEventArgs e)
{
this.Hide();
_lockRectangle.Tapped -= OnLockRectangleTapped;
}
Unfortunately ContentDialog does not offer such behavior.
There are two alternatives you can consider:
Popup - a special control built for this purpose, which displays dialog-like UI on top of the app content. This control actually offers a IsLightDismissEnabled for the behavior you need. Since the Anniversary Update (SDK version 1607) also has a LightDismissOverlayMode, which can be set to "On" to automatically darken the UI around the Popup when displayed. More details are on MSDN.
Custom UI - you can create a new layer on top of your existing UI in XAML, have this layer cover the entire screen and watch for the Tapped event to dismiss it when displayed. This is more cumbersome, but you have a little more control over how it is displayed

click a textblock without selecting the parent listview item

I'm developing a windows store application with C# and XAML. I am using a ListView to display the collection of data.
Inside the ListView I have a data template which has grids and a TextBlock in the grid. I want to tap/click the TextBlock and give action without selecting the parent ListView item as I already have event to handle the selected ListView item. I don't want both to overlap.
Thanks in advance for any response.
So you want to be able to select the ListViewItem when tapping one part of it, but not the TextBlock? If this is the case, in the TextBlock's Tapped event add e.Handled = true;. This should make it so that it isn't further routed up to the parent ListView.
The other thing you can do (which will likely be a more general solution to whatever you want to do with your ListViewItems) is to not use thing SelectionChanged event and instead handle everything with ItemClick. You can then deduce whether the OriginalSource of the event is indeed your TextBlock. Then, if it's not the TextBlock, change the parent ListView's SelectedItem.
An example for chceking the OriginalSource
public static void ItemClickEvent(object sender, ItemClickEventArgs e)
{
if(e.OriginalSource is TextBlock)
DoNothingOrMaybeTextBlockEvent();
else
{
ListView.SelectedItem = e.ClickedItem;
}
}
Hope this helps.
Edit: Added some example code for the OriginalSource check

adding images to the label suggestion

In my project I need to create some play,pause,stop buttons in one composite.
For that I created one composite and added these buttons there. Also I have added the images
for each button. But after drawing, it does not look good. I mean images on the buttons does not look good.Clients are not satisfied. Now is it possible to add Images to Label and give some Toggle button actions to the label? I know I can add images to the label. But when I click the label,it does not give button effect..
If you want a custom look for your 'buttons' you could use labels with custom images (one for the normal state and one for the "pushed" state. Something like:
final Label stop = new Label(composite, SWT.NONE);
stop.setSize(STOP_IMG.getImageData().width, STOP_IMG.getImageData().height)
stop.setBackgroundImage(STOP_IMG);
stop.addMouseListener(new MouseAdapter()
{
#Override
public void mouseUp(MouseEvent e)
{
stop.setBackgroundImage(STOP_IMG);
}
#Override
public void mouseDown(MouseEvent e)
{
stop.setBackgroundImage(STOP_DOWN_IMG);
// DO ACTION
}
});
For a nice UI you could also add a MouseTrack listener and have different images for the mouse over states.
Disadvantage of this is you are making it less accessible as it will only respond to mouse events. If you go for this approach you should look at creating your own class that extends MouseAdapter, and takes the label, images and action to invoke in a constructor so you don't end up with tonnes of very similar anonymous classes.
I have used toolbars in the past to achieve a nice effect.
This will create a toolbar with an item that behaves like a regular button:
//Toolbar button
ToolBar toolBar = new ToolBar(composite,SWT.FLAT);
ToolItem toolItem = new ToolItem(toolBar,SWT.PUSH);
toolItem.setImage(image);
This will a toolbar with an item that has toggle behaviour:
//Create a toggle effect
ToolBar toggleToolBar = new ToolBar(composite,SWT.FLAT);
ToolItem toggleToolItem = new ToolItem(toggleToolBar,SWT.CHECK);
toggleToolItem.setImage(image);