Setting Panorama Background for user control in Panorama page - xaml

How set the Panorama page Background for User control which is inside the PanoramaItem ?
I had put one user control in Panorama Item. I expect that the same panoroma background is applied to user control, but its not, there is a difference..? how to set the normal Panorama Back ground to the user control which is bound to the panorama item.
<controls:Panorama Grid.Row="1">
<!--Panorama item one-->
<controls:PanoramaItem Header="{Binding Path= Localizedresources.RecentPanoramaItemHeader, Source={StaticResource LocalizedResources}}">
<views:RecentFileView DataContext="{Binding RecentFileViewModel}" />
</controls:PanoramaItem>
<!--Panorama item two-->
<controls:PanoramaItem Header="{Binding Path= Localizedresources.FileserversPanoramaItemHeader, Source={StaticResource LocalizedResources}}">
<views:DashboardView DataContext="{Binding DashboardViewModel}" />
</controls:PanoramaItem>
<!--Panorama item three-->
<controls:PanoramaItem Header="{Binding Path= Localizedresources.MenuPanoramaItemHeader, Source={StaticResource LocalizedResources}}">
<Grid>
</Grid>
</controls:PanoramaItem>
<!--Panorama item four-->
<controls:PanoramaItem Header="{Binding Path= Localizedresources.TheftguardPanoramaItemHeader, Source={StaticResource LocalizedResources}}">
<Grid/>
</controls:PanoramaItem>
</controls:Panorama>
While I am running the application I can see the difference in Back ground of user control. I need the same feel as Panorama not the user control. for that I need the back ground of user control is same as Panorama. - while applying light theam to phone.
I need a transparent background of user control.

I suspect that one (or more) of your UserControls has a Background value set on the root element. The default UserControl that gets added in Visual Studio has the Background property on the root Grid (named LayoutRoot) set: Background="{StaticResource PhoneChromeBrush}", which is not transparent. If you simply remove the Background property, the UserControl will become transparent: <Grid x:Name="LayoutRoot">.

Related

How to resize NavigationView and SplitView in UWP

I want to enable user to resize the NavigationView in my UWP app. Couldn't find any resources how I could do that.
I see some of the apps have "Resizable splitView" but for SplitView also, I cannot see any such resize property exposed to set by default.
Pls help.
Thanks in Advance
There are no such property can resize SplitView and NavigationView, you need to custom layout to implement a similar effect. You could use Slider control and bind the OpenPaneLength Property of SplitView to Slider.Value to do this. Please refer to the following code.
<Grid>
<SplitView Name="CoreSplitView"
DisplayMode="Inline"
IsPaneOpen="True"
OpenPaneLength="{Binding Value, ElementName=MasterSlider, Mode=OneWay}">
<SplitView.Pane>
<Grid Name="PaneGrid" Background="Gray">
<Slider Name="MasterSlider"
MinWidth="480"
VerticalAlignment="Stretch"
Maximum="480"
Minimum="10"
Opacity="0"
Value="150"
/>
<StackPanel Name="PaneStackPanel"
Margin="0,0,10,0" Background="LightGray">
<TextBlock TextWrapping="Wrap" Text="Use a slider when you want your users to be able to set defined, contiguous values (such as volume or brightness) or a range of discrete values (such as screen resolution settings).A slider is a good choice when you know that users think of the value as a relative quantity" />
</StackPanel>
</Grid>
</SplitView.Pane>
<Grid Name="ContentGrid" Background="LightSteelBlue">
</Grid>
</SplitView>
</Grid>
The StackPanel that is directly under our slider, acts like a cover for our Slider. Notice the StackPanel has Margin="0,0,10,0", this translates to a 10px distance from the right wall, which allows the Slider area to be exposed as a gray strip that is used to drag the Pane, again the 10px is arbitrary but it has to match the Minimum of the Slider.

XAML: MouseLeftButtonUp only fires when clicking text, not whitespace

I have a list box (in Silverlight) that uses a DataTemplate for the ItemTemplate. The DataTemplate is defined like this:
<DataTemplate>
<StackPanel Orientation="Horizontal"
MouseLeftButtonUp="RoleStackPanel_MouseLeftButtonUp"
Tag="{Binding}">
<TextBlock Name="roleItem"
Text="{Binding Path=DisplayValue, Mode=TwoWay}"/>
</StackPanel>
</DataTemplate>
I have found that my event RoleStackPanel_MouseLeftButtonUp only fires if any text displayed in the TextBlock is clicked. If the user clicks any whitespace in the item to the right of the text, the event does not fire. So lets say the control is 300px wide but only has the word "Admin" in the item, you MUST click "Admin" and not to the empty whitespace to the right.
How can I make it so the events fires wherever I click in the item, on text or whitespace?
So a couple quick considerations to get you sorted.
a.) The area of your panel does not have HitTestVisibility by default. This is by design and intentional. To get your event to fire for the parent simply add the property of IsHitTestVisible="True" or provide a Brush for the panel via Background="Transparent" to it to invoke HitTestVisibility.
b.) A StackPanel will only consume the space required by its children. If you wish to provide a large area for a user to hit like you describe than swap the StackPanel for Grid which should consume whatever space is made available by its parent. Same rules of HitTestVisibility apply.
<DataTemplate>
<Grid IsHitTestVisible="True"
MouseLeftButtonUp="RoleStackPanel_MouseLeftButtonUp"
Tag="{Binding}">
<TextBlock Name="roleItem"
Text="{Binding Path=DisplayValue, Mode=TwoWay}" />
</Grid>
</DataTemplate>
Hope this helps, cheers!

Dropping control from toolbox replaces previous code

I have a strange problem with XAML code in Windows Phone 8.1 SL application. I have created a pivot page. So I have something like that:
<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<phone:Pivot Title="MYAPP">
<!--Pivot item one-->
<phone:PivotItem x:Name="pivotPaliwo" Header="Alcohol" />
<!--Pivot item two-->
<phone:PivotItem Header="Cigarette"/>
</phone:Pivot>
</Grid>
When I drag and drop e.g. a button it creates this code:
<Button Content="Button" HorizontalAlignment="Left" Margin="108,192,0,0" VerticalAlignment="Top"/>
So it is ok. BUT, when I try to add another button (it doesn't matter what control is it) it REPLACES that code for a new one.
I can't add more that one control by dropping from toolbox. Why is that so?

Xaml, How to bind a list of buttons over an image in different coordination

For a windows 8 Apps, i need to put a list of buttons over an image. Each button has CoordinateX and CoordinateY properties. I use a gridView to bind to the list of buttons.
I need to have the result as below:
Here is my code:
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" >
<Canvas>
<Image Source="ms-appx:///Assets/red.png" Stretch="None" ></Image>
<GridView ItemsSource="{Binding Buttons}"
SelectionMode="None" IsSwipeEnabled="false" IsItemClickEnabled="True" ItemClick="Button" Padding="0">
<GridView.ItemTemplate>
<DataTemplate>
<Button Width="194" Height="51" Background="Gray" Canvas.Left="{Binding CoordinateX}" Canvas.Top="{Binding CoordinateY}"></Button>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Canvas>
</Grid>
But this is what i get after running the app:
Ites Likely that at runtime before the X and Y co-ordinates can be set for the items within the GridView, the GridView itself has its properties applied.
Since
1) the GridView is intended to be used for oganization control
and
2) you havent forced the Grid to fill the view space
what you're left with is a GridView that acts as it wishes and limits the ability of its items to conform to your style, should the style attempt to force the items collection to live outside the bounds of the control.
You could try to set the GridView's Horizontal Alignment property but even if it happens to work, its probably a better bet to use a less organized content control like the more basic ItemsPresenter.
Which ever control you end up using... make sure to check for /set the HorizontalContentAlignment & VerticalContentAlignment properties if they exist.

FlipView SelectedItem is not showing when Changing View State?

I am using FlipView to show items (adding flip view item from code) and using VirtualizingStackpanel. when I change the View (snapView and fullmode) will clear flipview items using FlipView.Item.Clear() and do some size calculation and again add items in the flipview. The issue is i am not able to see the item after this and if i tap to the other item and coming back i am able to see the item. Any idea what is causing the issue?
<FlipView x:Name="fp" Margin="120,0,100,0" Visibility="Visible" SelectionChanged="onSelectionChanged">
<FlipView.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel x:Name="FlipView2ItemsPanel" Background="Transparent" Orientation="Horizontal" >
</VirtualizingStackPanel>
</ItemsPanelTemplate>
</FlipView.ItemsPanel>
</FlipView>