I have one xaml page where there are multiple UI elements are there, and i wanted narrator to pick some UI element and ignore other. So with below code you can, see that I have four Grid Row Definition the last UI element is rendered on screen as Grid.RowSpan=4 and other UI elements also got intialized just for performance reason, but it won't be visible intially untill the last element Visibility will be set to Collapsed.
What i want when that "UserControlView1" control is rendered narrator should not pick other UI element, but once that is gone then narrator should start picking those UI element.
I have tried IsTabStop=false but not sure why it is not working.
<Page
xmlns:mvvm="using:Prism.Windows.Mvvm"
mvvm:ViewModelLocator.AutoWireViewModel="True"
// some random namespaces declaration
Loaded="PageLoaded">
<Grid>
<Grid.ColumnDefinitions>
// some Grid Column definition
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
// "4" Grid Row definition...
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ctl:UserControlView2
x:Name="UserControlView2"
Grid.Row="1"
Grid.ColumnSpan="2"
IsTabStop="False"/>
<ctl:UserControlView3
x:Name="UserControlView2"
Grid.Row="2"
Grid.Column="0"
IsTabStop="False" --> I have set IsTabStop to false />
<ctl:UserControlView4
x:Name="UserControlView3"
Grid.Row="3"
Grid.Column="0"
IsTabStop="False" --> I have set IsTabStop to false />
<ctl:UserControlView1
d:Visibility="Collapsed"
x:Name="UserControlView1"
x:Load="{x:Bind ViewModel.UserControlView1}"
Grid.Row="0"
Grid.RowSpan="4" // as it span to four rows the reason being its gets render at top of the screen and other UI element will be there beneath it.
Grid.ColumnSpan="2"
TabIndex="0"/>
</Grid>
</Page>
Related
this is a simple grid with a tiny button in it:
<!--ReverseButton-->
<Grid Grid.Row="1" RowSpacing="0" >
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="5*"/>
<ColumnDefinition Width="1*"/>
</Grid.ColumnDefinitions>
<ImageButton
Source="btn_reversed_unpressed"
x:Name="btn_reverse_list_mainmenu"
BackgroundColor="#00000000"
Grid.Column="1"
Clicked="ReverseListForSwipeView"
/>
</Grid>
The size of this Row (row 1) is set here:
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="0.17*" />
<RowDefinition Height="4.5*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
I set the value to 0.17* to have the button always be very tiny. If i would set the row to "auto" the icon would become much bigger (since the source image is bigger in size)
If I make the size to, lets say 0.25* instead of 0.17* the row and therefore the button both get bigger and everything is fine. (Except now it is too big)
But with size 0.17* it is just about right... Well except for this:
It is quite hard to see, but the icon at the bottom is cut of slightly. The border is not as big as it is on the top.
This I have noticed quite some time now.
I tried setting the rowspacing to 0 or even negative values, but nothing worked.
Why is the icon cut off.
The top part isnt cut and both parts (top and bottom) touch the row end and beginning pixel perfect.
An answer based on my comment above. I suggest setting the HeightRequest of the ImageButton to the size you want the icon to be and then just set the row height to Auto and let the layout manager do the rest. See my example where I create a Grid with 3 rows set to Auto size and then just use the HeightRequest property to have it draw at the correct size. I left the grey background of the button in so you can see how the row sizes dynamically.
<ContentPage.Content>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="50"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="0" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="75"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="1" />
<ImageButton Source="ic_email_dark"
Aspect="AspectFit"
HeightRequest="100"
HorizontalOptions="Fill"
VerticalOptions="Center"
Grid.Row="2" />
</Grid>
</ContentPage.Content>
Gives the following:
Steps:
Make a brand new "Blank App (Universal Windows)"
Set Target and Minimum Version: "Windows 10 Creators Update (10.0; Build 15063)"
Add the code below to MainPage.xaml and run the app.
MainPage.xaml
<Grid Width="128" Height="120">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="1" x:Name="ChangeHeightRow" />
</Grid.RowDefinitions>
<Grid>
<Canvas Background="Red">
<Ellipse Width="140" Height="140" Fill="Green" />
</Canvas>
</Grid>
</Grid>
Should see this:
Why is the green circle getting cut off? Further to that, if you set ChangeHeightRow.Height to 0, it looks like this:
What is going on? I would expect the circle to never be cut off...maybe I'm wrong?
TL;DR: You are clipping of the Ellipse by having an empty row of 1 pixel in your Grid.
The problem is on multiple levels. Your outer Grid has a Width and Height set. Next your RowDefinition has a Height set and your Ellipse is of a bigger size than both heights.
<Grid Width="128" Height="120">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="1" x:Name="ChangeHeightRow" />
</Grid.RowDefinitions>
<Grid>
<Canvas Background="Red">
<Ellipse Width="140" Height="140" Fill="Green" />
</Canvas>
</Grid>
</Grid>
By setting these sizes, you are allowing other controls to come closer to the inner controls than they would if you would use Auto as sizing for the rows and nothing (=auto) as Grid size.
In your initial code, you have a Grid row with the Ellipse and an empty row of 1 pixel high. By default XAML controls have a Z-axis with items declared at the bottom of your XAML file being the topmost control in the visual layers. So for your Grid, your second row is on top of your first row in case of overlap. Since the Ellipse leaks outside of the row, the second row is drawn over it and clips your Ellipse.
By setting the height to 0, the second row is no longer drawn and can't clip your control.
To make this more clear, I have tweaked your XAML a bit, adding another StackPanel outside your grid and adding a Button. As you can see, the Button is drawn on top of the Ellipse, as it's defined below in XAML and thus getting a higher visual layer on the Z-axis.
<StackPanel Width="130">
<Grid Width="128" Height="120">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="0" x:Name="ChangeHeightRow" />
</Grid.RowDefinitions>
<Grid>
<Canvas Background="Red">
<Ellipse Width="140" Height="140" Fill="Green" />
</Canvas>
</Grid>
</Grid>
<Button Background="Black" Foreground="White">Test</Button>
</StackPanel>
If we change the StackPanel to a Grid, we have the same behavior. However moving the Button to the top in the XAML declaration (and keeping Grid.Row on 1 so it's below the Ellipse), you'll notice that it's now behind the Ellipse because of the Z-layers ordered differently.
<Grid Width="130">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Button Background="Black" Foreground="White" Grid.Row="1">Test</Button>
<Grid Width="128" Height="120" Grid.Row="0">
<Grid.RowDefinitions>
<RowDefinition Height="120" />
<RowDefinition Height="0" x:Name="ChangeHeightRow" />
</Grid.RowDefinitions>
<Grid>
<Canvas Background="Red">
<Ellipse Width="140" Height="140" Fill="Green" />
</Canvas>
</Grid>
</Grid>
</Grid>
I have probably the most basic implementation of AutoSuggestBox I can think of.
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Grid x:Name="SearchBoxContainer">
<AutoSuggestBox
PlaceholderText="Type a topic name"
Margin="8"
QueryIcon="Find"
DisplayMemberPath="Title"
TextChanged="AutoSuggestBox_TextChanged"
QuerySubmitted="AutoSuggestBox_QuerySubmitted"
SuggestionChosen="AutoSuggestBox_SuggestionChosen"
ItemsSource="{Binding MatchingTopics}"
/>
</Grid>
</Grid>
When typing in, I get a suggestion list. But it appears ABOVE the autoSuggestBox. The problem is that because I have placed the AutoSuggestBox at the top of the screen already, the suggestion list goes off screen so I can only see one item!
Is it possible to control the direction of the AutoSuggestBox so that it will expand downwards? Why doesn't the AutosuggestBox select the right direction based on available screen real estate?
I am trying to create a windows 8.1 application and wanted to know that is there a control that allows me to create something like popup or messagebox in XAML that covers about 80% of the screen with some margin on either sides of the screen? Like when we click on a button and the screen's brightness gets dim except for the popup that is opened. As an example I have attached an image.Example from windows settings
Other than MessageBox there isn't an in-box control which does this. It's fairly easy to implement yourself in Xaml by creating a Grid with a partially opaque background and your controls in the middle of three rows. In this implementation the rows and columns will size to the controls placed in the center. You could also set those sizes more directly if you prefer.
<Grid Background="{ThemeResource DimmedBrush}">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*" />
<ColumnDefinition Width="Auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<!-- Coloured background for the center row -->
<Rectangle Grid.Row="1" Grid.ColumnSpan="3" Fill="{ThemeResource AppThemeBrush}" />
<!-- User control with the contents in the center row + column -->
<local:MyControls Grid.Row="1" Grid.Column="1" />
</Grid>
There are third party libraries which include controls like this. For example see Callisto's CustomDialog.
I'm having a frustrating problem running a simple fade in animation in my app.
My app consists of three pivots.
Each pivot contains three sections that have their detailed information "Collapsed" by default and that becomes "Visible" if you tap anywhere on the section.
When you tap to expand the detailed information for a section, a fadeIn() animation is called from the code-behind:
nowExpandableContent.Visibility = System.Windows.Visibility.Visible;
Storyboard s = new Storyboard();
DoubleAnimation fadeInAnimation = new DoubleAnimation();
fadeInAnimation.From = 0.0;
fadeInAnimation.To = 1.0;
fadeInAnimation.Duration = new Duration(TimeSpan.FromSeconds(1.0));
Storyboard.SetTarget(fadeInAnimation, this.nowExpandableContent);
Storyboard.SetTargetProperty(fadeInAnimation, new PropertyPath("Opacity"));
s.Children.Add(fadeInAnimation);
s.Begin();
The problem I'm having is that sometimes when I tap a section to expand, the app will flicker/flash momentarily (having paid close attention, I noticed it's showing the content of the other pivots). Sometimes this can happen on my first tap of a section. Other times it can take a few or more taps (open/close/open/close etc.) for it to occur. It's really random.
This is an excerpt from the xaml of the first pivot/section within it (note: the Tap event handler, "Now_Tap", is where the fadeIn method is called from):
<controls:PivotItem
x:Name="pivotNow"
Margin="0">
<ScrollViewer
Height="780"
ManipulationStarted="ScrollViewerToday_ManipulationStarted"
x:Name="scrollViewerNowPivot">
<Grid
x:Name="GridNow">
<Grid.RowDefinitions>
<RowDefinition Height="*"/> <!-- NOW -->
</Grid.RowDefinitions>
<!-- NOW ROW START -->
<StackPanel
Background="{Binding ActiveTheme.BackgroundAlt1, Source={StaticResource ThemeController}}"
Grid.Row="0"
Tap="Now_Tap">
<!-- NOW GRID START -->
<Grid
Margin="0,50,0,50">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="70"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="auto"/>
<ColumnDefinition Width="50"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- NOW TITLE ROW START -->
<wptoolkit:WrapPanel
Grid.Row="0"
Grid.Column="1"
Orientation="Horizontal">
<!-- NOW TITLE -->
<TextBlock
FontSize="18"
FontWeight="Bold"
Foreground="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
Text="NOW"/>
<!-- NOW EXPANDABLE ICON -->
<Border
Background="{Binding ActiveTheme.BackgroundAlt1, Source={StaticResource ThemeController}}"
BorderBrush="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
BorderThickness="1"
CornerRadius="250"
Margin="15,2,0,0"
Opacity="0.5"
Padding="4,5,4,4"
Width="24">
<TextBlock
FontSize="10"
FontFamily="Segoe UI Symbol"
Foreground="{Binding ActiveTheme.ForegroundAlt1, Source={StaticResource ThemeController}}"
HorizontalAlignment="Center"
Opacity="0.5"
Text=""
x:Name="nowExpandableIcon"/>
</Border>
</wptoolkit:WrapPanel>
<!-- NOW TITLE ROW END -->
<!-- NOW CONTENT ROW START -->
<StackPanel
Grid.Row="1"
Grid.Column="1"
Margin="0,50,0,50">
<wptoolkit:WrapPanel>
<!-- NOW ICON -->
<TextBlock
FontSize="80"
FontWeight="Bold"
FontFamily="/Assets/Fonts/WeatherIcons-Regular.otf#Weather Icons"
Foreground="{Binding PivotNow.IconColour}"
Text="{Binding PivotNow.Icon}"
VerticalAlignment="Bottom"/>
<!-- NOW TEMPERATURE -->
<TextBlock
FontSize="90"
FontWeight="Bold"
Margin="40,0,0,-5"
Text="{Binding Location.Currently.Temperature}"
VerticalAlignment="Bottom"/>
</wptoolkit:WrapPanel>
<!-- NOW SUMMARY -->
<TextBlock
FontSize="24"
Margin="0,20,0,0"
TextWrapping="Wrap">
<Run Text="{Binding PivotNow.Summary}"/><Run Text="."/> <Run Text="Feels like "/><Run Text="{Binding Location.Currently.ApparentTemperature}"/><Run Text="."/>
</TextBlock>
<!-- NOW EXPANDABLE CONTENT -->
<TextBlock
FontSize="24"
Margin="0,30,0,0"
TextWrapping="Wrap"
Text="{Binding Location.Currently.ExpandableContent}"
Visibility="Collapsed"
x:Name="nowExpandableContent"/>
</StackPanel>
<!-- NOW CONTENT ROW END -->
</Grid>
<!-- NOW GRID END -->
</StackPanel>
<!-- NOW ROW END -->
I know it's tough to diagnose the root cause of this issue without having access to the entire xaml/debugging application, but are there any hints towards what may be causing this behaviour from what I have shared? If not, is the general problem I'm having remotely familiar to anyone by any chance?
I should add that this problem never occurs if I expand a section without using an animation.
Thanks for your time.
You need to set Opacity to 0 before call an animation. For now, you make yor element Visible and few ticks later begins an animation. This may cause flickering you see
nowExpandableContent.Opacity = 0.0;
nowExpandableContent.Visibility = System.Windows.Visibility.Visible;
Another approach if this doesn't work:
Make all hidden (non-selected) pivot items Collapsed by hand, i.e. subscribe to pivot SelectionChanged event and make panel which is navigated to Visible and other pages - Collapsed