How to handle the events when someone clicks(mouse click) on the violet color space around the elements ?
Putting a general onclick on the container is overriding the individual item behaviors (they all have their internal onclick handlers). Any other way to solve this ?
Edit:
<Grid onClick={ClickHandler} container direction="row">
<Grid item>
// Filter Screen that has buttons, checkboxes
</Grid>
<Grid item>
............
</Grid>
</Grid>
The problem here is the container ClickHandler just overrides all the clickhandlers that the filter screen has. So that tactic was not successful.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on checkboxes are still processed.
<Grid onClick={ClickHandler} container direction="row">
<Grid item onClick={(e) => e.stopPropagation()}>
// Filter Screen that has buttons, checkboxes
</Grid>
<Grid item>
............
</Grid>
</Grid>
I have an idea that I think will work, but I'm not sure is the best approach or follows best practices. I would make use of the data- attributes on your components. Add an attribute like data-element="container" to your parent container. If event.target.dataset.element === "container" in your click handler, then you've clicked the background around the elements, otherwise you've clicked one of the elements. If necessary, you can also add data-element="componentN" to each of your components inside the container and move your logic for the onClick effects for your individual components inside there.
Related
In my Windows Store App, when I press the arrow buttons on the keyboard to go to the next or previous item in my FlipView, a dashed line border appears around the FlipView to indicate that it has focus. This looks ugly and serves no purpose in my app. It looks like this border is hidden in other apps that I have looked at.
The SelectionBorderVisibility property is not available in WinRT. I was able to hide the border by defining a custom FlipView style and setting the Stroke property inside one of the rectangle to null as follows.
<Rectangle x:Name="FocusVisualWhite" IsHitTestVisible="False" Opacity="0" StrokeDashOffset="1" StrokeEndLineCap="Square" Stroke="{x:Null}" StrokeDashArray="1,1"/>
However, I'd rather not have to define an entire custom FlipView style if possible. Is there any other way to do this?
What properties will make the Popup control Shows exactly over the mouse (On real device above the finger position on the screen while touching) in a windows phone application?
The xaml used is
<Grid Grid.Row="2">
<phone:WebBrowser IsScriptEnabled="True" MouseMove="mainBrowserControl_MouseMove" x:Name="mainBrowserControl" />
<Popup Name="ActionMenus" IsOpen="False">
<StackPanel Orientation="Horizontal" Background="Black" >
<Button Name="btnA1" Click="btnAq_Click">Annotation</Button>
<Button Name="btnHq" Click="btnHq_Click">Highlight</Button>
</Popup>
</Grid>
And the code i used for showing Popup is
private void mainBrowserControl_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
{
ActionMenus.IsOpen = true;
}
But the position of the Popup is on the top of Grid . How can i make it exactly above the mousepointer (or where the user touched on the screen)
In WPF Popup i can see some more properties like Placement and if we use Placement="Mouse" the popup will shown exactly over Mouse , But this property is missing in Windows phone
As you have not made any Rows in your Grid, any element added to the Grid will be placed on top of all other elements.
In order to place the popup where you want it, you must find out where the user tapped. It can be found in the MouseEventArgs input to the method:
http://msdn.microsoft.com/en-us/library/system.windows.input.mouseeventargs.getposition(v=vs.110).aspx
Then place the ActionMenus accordingly.
At first, if you want to popup show up anywhere on the page you should:
1) Create second grid, that won't have any rows, or columns over your content (with Horizontal and Vertical aligments set to Stretch) - it will be your placing field that will take the whole page.
OR
2) Add to a popup Grid.Row and Grid.Column spans.
Next:
As emedbo said you should catch MouseDown event and get the MouseEventArgs coordinates. And then you can do:
If you selected method 1:
Popup pop = new Popup();
pop.Margin = new Thikness (X,Y,0,0) // To set margin left and top to show popups left top corner under the finger.
Grid.Children.Add(pop);
//Syntax maybe little incorrect, because i'm writting this from my mind
If you selected method 2:
Popup pop = new Popup();
pop.Margin = new Thikness (X,Y,0,0) // To set margin left and top to show popups left top corner under the finger.
pop.*** //Here must be added Rowspan and Columnspan of the parent container
Grid.Children.Add(pop);
//Syntax maybe little incorrect, because i'm writting this from my mind
In my WP8 app I want to add an image to listpicker Backgrond.
How can I add it?
<toolkit:ListPicker ExpansionMode="FullScreenOnly" Header="blabla:" Name="mylistpicker" Margin="0,395,222,47">
</toolkit:ListPicker>
<toolkit:ListPickerPage>
<toolkit:ListPickerPage.Background>
<ImageBrush ImageSource="=/images/bg3.png"/>
</toolkit:ListPickerPage.Background>
</toolkit:ListPickerPage>
It did not work for me.
any other code please?
If you want an Image in Background of ListPicker, You can add ListPicker within a Grid and set Grid Background property to your desired Image.
<Grid Background="/path/a.jpg">
//add ListPicker Here
</Grid>
I'm trying to create an "overlap" effect (for lack of a better term). There will be a splitter that when moved, exposes a different view of two similar images (e.g. between colored and grayscale).
I plan on using CustomGridSplitter from WinRTXAMLToolkit (due to WinRT's lack of a splitter). I'm thinking of starting with a grid similar to:
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition Height="10" />
<RowDefinition />
</Grid.RowDefinitions>
<controls:CustomGridSplitter Grid.Row="1" Opacity="0.25"/>
</Grid>
... but I'm not sure how to proceed. If I specify two image controls on the first and third row (or column), how do prevent the image controls from moving (or so)? Also, is it possible to do this diagonally?
You could use two Rectangles that use an ImageBrush or two Image controls that use a Clip property to clip their contents. Unfortunately you can't have diagonal clips in WinRT, only rectangular ones. Maybe you could check if combining multiple RotateTransforms with a Clip would work, you never know. Other than above I would use a Slider instead of a GridSplitter for your scenario.
I want to display list of items in my Metro applications. And I want to just display them. I don't want any kind selection, mouse-over, keyboard control, or animation effects.
The items will be displayed with ItemTemplate, the list will be data-bound and I want scrolling (both vertical and horizontal).
What would be the simplest way to do this? The ListView has lots of defaults, that make "simply displaying" items a heroic task.
The ListView can get rid of almost everything you want by setting SelectionMode="None" and IsHitTestVisible="False". This will give you no selection or highlight of any elements with mouse or keyboard. You will still get scrolling and supporting interactions for scrolling. You will still get animations, however.
Otherwise, you will probably have to look at using an ItemsControl and ScrollViewer to get the effect you want.
Use the ItemsControl in the first instance. You add your data template as you desire and use the ItemsPanel control to apply your layout. For example, the StackPanel below allows the orientation to switch to horizontal.
<ItemsControl ItemsSource="{Binding Users}" >
<ItemsControl.ItemTemplate>
<DataTemplate>
<Image Source="{Binding ImageUri}" Width="40" Height="40" Margin="5" />
</DataTemplate>
</ItemsControl.ItemTemplate>
<ItemsControl.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ItemsControl.ItemsPanel>
</ItemsControl>