I have created a usercontrol that has some controls outside of view, but they will be visible as soon as animation show them. Animation is changing their offset, so they slowly appears. Now, when I put my usercontrol on some view,
those controls that I don't want to be seen are visible. I tied to use Grid, GridView, Canvas...but everytime I can see these controls.
I need 4 of my usercontrols in a row, to be resizeble. And this issue makes some usercontrols to overlap eachother.
Here is how I have show them in grid:
<Grid x:Name="gridDown" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
<ColumnDefinition Width="25*" />
</Grid.ColumnDefinitions>
<local:MyUserControl x:Name="myControl1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0"/>
<local:MyUserControl x:Name="myControl2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="1"/>
<local:MyUserControl x:Name="myControl3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="2"/>
<local:MyUserControl x:Name="myControl4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="3"/>
</Grid>
How to show only central part of my usercontrol? How to hide rest of the controls that I don't want to be seen? What control is the best for this?
To control what's displayed you need to tell it where to set the limits of what to show. In WPF has the helpful ClipToBounds property but unfortunately this isn't available in UWP so you need to set the 'Clip' property yourself.
So, if your page looked like this
<StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
<local:MyControl/>
<local:MyControl/>
<local:MyControl/>
</StackPanel>
And your control XAML looked like this
<Grid Height="50" Width="100">
<Grid.Clip>
<RectangleGeometry Rect="0 0 100 50"/>
</Grid.Clip>
<Grid.Resources>
<Storyboard x:Name="ShowRedBit">
<DoubleAnimation Storyboard.TargetProperty="Rectangle.RenderTransform.(CompositeTransform.TranslateX)"
Storyboard.TargetName="RedBit"
Duration="0:0:2"
To="0"/>
</Storyboard>
</Grid.Resources>
<Button HorizontalAlignment="Center" Click="Button_Click">show red</Button>
<Rectangle Fill="Red" Height="50" Width="50" x:Name="RedBit" RenderTransformOrigin="0.5,0.5" >
<Rectangle.RenderTransform>
<CompositeTransform TranslateX="-100"/>
</Rectangle.RenderTransform>
</Rectangle>
</Grid>
You can see that I've manually set the clip property to be the same as the size of the control.
The answers to this question also show some other approaches, including a way to set it dynamically.
Related
I'm creating an XML Form Reader. Each of the control types are User Controls. However when the user taps somewhere on the form that isn't a focused control (i.e. TextBlock), the form jumps focus to the first focusable control in the page. (i.e. TextBox)
This scrolls the page to the top (usually), taking the user away from what they were just working on.
I have tried a lot of different things around the focus events but have hit a wall on how to solve this.
What would be the best way to handle this ? Any hints or tips would be greatly appreciated.
Thanks
EDIT (more info)
The "MASTER" page has a StackPanel
<StackPanel x:Name="pnlFormMain" ScrollViewer.BringIntoViewOnFocusChange="False"/>
For each control in the xml form, a UserControl is added to the stackpanel.
<UserControl.Resources>
<Storyboard x:Name="Show">
<DoubleAnimation Duration="0:0:0.6" To="1" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="_WidgetMaster" d:IsOptimized="True"/>
</Storyboard>
<Storyboard x:Name="Hide">
<DoubleAnimation Duration="0" To="0" Storyboard.TargetProperty="(UIElement.Opacity)" Storyboard.TargetName="_WidgetMaster" d:IsOptimized="True"/>
</Storyboard>
</UserControl.Resources>
<Grid x:Name="grdInput" ScrollViewer.BringIntoViewOnFocusChange="False">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="*" />
</Grid.ColumnDefinitions>
<Grid Grid.Column="0" Grid.Row="0" ScrollViewer.BringIntoViewOnFocusChange="False">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="auto" />
<ColumnDefinition Width="auto" />
</Grid.ColumnDefinitions>
<!-- label -->
<TextBlock x:Name="lblLabel" Text="Label" Grid.Column="0" VerticalAlignment="Center" Margin="3,6,5,5" TextWrapping="Wrap" />
<!-- HINT -->
<Ellipse x:Name="ellHint" Height="25" Width="25" Grid.Column="1" StrokeThickness="2" Stroke="LightBlue" Margin="5,0,5,0" Tapped="Hint_Tapped" VerticalAlignment="Center">
<Ellipse.Fill>
<ImageBrush ImageSource="ms-appx:///XForms/Assets/information.png" />
</Ellipse.Fill>
</Ellipse>
</Grid>
<Frame x:Name="control" Grid.Column="1" Grid.Row="0" />
<TextBlock x:Name="lblConstraintMessage" Grid.Row="2" Grid.ColumnSpan="99" FontSize="10" VerticalAlignment="Center"
HorizontalAlignment="Right" Margin="0,0,5,0" Visibility="Collapsed" />
</Grid>
The same UserControl is used for almost all controls. And the input for that control is a second UserControl that goes into the Frame near the bottom.
(e.g.)
<Grid x:Name="grdInput">
<TextBox x:Name="txtInput" Text="" Grid.Row="0" Grid.Column="1" Margin="15,0,0,0" LostFocus="txtInput_LostFocus" KeyDown="txtInput_KeyDown" TextAlignment="Right" />
<Border x:Name="brdrValuePlaceholder" Background="Transparent" BorderThickness="0,0,0,1" BorderBrush="{ThemeResource TextControlBorderBrush}" HorizontalAlignment="Stretch"
Height="{ThemeResource TextControlThemeMinHeight}" Visibility="Collapsed">
<TextBlock x:Name="lblInput" Text="" Grid.Row="0" Grid.Column="1" Margin="0,0,5,0" Tapped="lblInput_Tapped" TextAlignment="Right" HorizontalAlignment="Stretch"/>
</Border>
</Grid>
The LostFocus event there just sets a value in the database
Other controls on the master page is a Popup and a ProgressRing
Along with a header bar.
EDIT 2
I have tried to do what I can with making the StackPanel unfocusable, and storing the previously focused control, but can get them to work as hoped.
I have put the source up on GitHub, I am new to GitHub, so if I need to do anything more, please let me know. The code is a bit older, but has the same problem. There is also a Android and iOS application in the solution, but only the UWP project has the issue.
The bounty is still alive, and will be awarded if anyone can help.
Thanks
Maybe it is focusing on the stackpanel itself?
Have dialog box popup or a textstring in the page itself to show what is always focused. That way you can see if the stacklayout is becoming focused.
Another possibility is that if you tap off, it is returning focus to the first element on the stacklayout (what it saw as tapped).
It's not trivial to recreate your exact scenario. However, there should be several possible solutions to your problem.
The first thing that comes to my mind is to intercept the Preview*keyboard/mouse events within your form.
When a KeyDown/MouseDown/Tap outside your text box is detected while it has the focus, call update the binding expression of the FocusManager, and set Handled=true to prevent the KeyDown or MouseDown event from being processed further if a non-user control is clicked. A markup extension could be helpful too.
It might be also crucial to hangle PreviewLost*Focus to detect any unwanted focus changes.
Another approach could be to mark all no-user input UI elements as Focusable=false in the XAML, e.g.
<XY Focusable="False">
...
</XY>
or disable them all together.
This question already has an answer here:
How do I place a text over a image in a button in WinRT
(1 answer)
Closed 5 years ago.
I am learning different ways of achieving certain layouts with XAML in UWP (I know I'm late to the party but I just started with the UWP stuff!)
What I am trying to achieve is a main navigation page kind of thing from a hub control on my main page. At every HubSection, I will have button on each column of a 2-column grid, which will contain buttons. Ive'tried something similar to this post but the debugger kept failing to attach to my UWP app when I used images instead of textblocks.
Essentially, what I've got until now is something like this: (I've shared my code down below)
But what I am trying to achieve is each button having its own image background and a separate TextBlock with semi-transparent background at the bottom centre of the button... (I've only photo shopped it, this is the thing I am trying to achieve...)
So this is what I've tried so far... I've also tried the relative panel but no luck...
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock HorizontalAlignment="Center">Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Grid>
My complete code looks something like this for this page.
<Page
x:Class="VaultManager.Terminal.Views.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid Background="Black">
<Hub SectionHeaderClick="Hub_SectionHeaderClick">
<Hub.Header>
<Grid Margin="0,20,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="80"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="pageTitle" Text="My Hub Sample" Style="{StaticResource SubheaderTextBlockStyle}" Grid.Column="1" IsHitTestVisible="false" TextWrapping="NoWrap" VerticalAlignment="Top"/>
</Grid>
</Hub.Header>
<HubSection Header="Overview">
<DataTemplate>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200" />
<ColumnDefinition Width="200" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="150" />
</Grid.RowDefinitions>
<StackPanel Orientation="Vertical" Grid.Column="0" Margin="10,10,10,0">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 0 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<RelativePanel>
<TextBlock>Column 0 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</RelativePanel>
</Button>
</StackPanel>
<StackPanel Orientation="Vertical" Grid.Column="1" Margin="10,10,10,10">
<Button HorizontalAlignment="Stretch">
<StackPanel>
<TextBlock>Column 1 Item 1</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
<Button HorizontalAlignment="Stretch" >
<StackPanel>
<TextBlock>Column 1 Item 2</TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</StackPanel>
</Button>
</StackPanel>
</Grid>
</DataTemplate>
</HubSection>
<HubSection Header="Videos" Name="Videos">
<!-- yada yada -->
</HubSection>
<HubSection Header="Audios" Name="Audios">
<!-- blah blah -->
</HubSection>
</Hub>
</Grid>
Good job giving us all that info. You may want to take a look here since the asker in that question seems to have had a similar issue. The answerer suggested using a Grid instead of a StackPanel. Hope that helps. After that, you should be able to adjust the transparency of the text. If you are using visual studio you can just click on the text element and adjust the background brush from the Properties tab. The button w/ the image should look like this:
<Button HorizontalAlignment="Stretch">
<Grid>
<TextBlock Text = "Column 0 Item 1">
<TextBlock.Background>
<SolidColorBrush Color="(**Colour here**)" Opacity = "(**Opacity Here {1 being opaque and 0 being transparent}**)/>
</TextBlock.Background></TextBlock>
<Image Source="/Assets/Artwork/150x150/RobCos_Worst_Nightmare_trophy.jpg" Stretch="None" />
</Grid>
</Button>
I have the following XAML markup, which I am using to display the GUI of my C# application:
<Grid x:Name="templateRoot" ClipToBounds="true" SnapsToDevicePixels="true" KeyboardNavigation.TabNavigation="Local">
<Grid.ColumnDefinitions>
<ColumnDefinition x:Name="ColumnDefinition0"/>
<ColumnDefinition x:Name="ColumnDefinition1" Width="0"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition x:Name="RowDefinition0" Height="Auto"/>
<RowDefinition x:Name="RowDefinition2" Height="0.05*"/>
<RowDefinition x:Name="RowDefinition1" Height="*"/>
</Grid.RowDefinitions>
<TabPanel x:Name="headerPanel" Background="White" Grid.Column="0" IsItemsHost="true" Margin="2,2,2,0" Grid.Row="0" KeyboardNavigation.TabIndex="1" Panel.ZIndex="1" VerticalAlignment="Top"/>
<StackPanel Grid.Row="1" Orientation="Horizontal" FlowDirection="RightToLeft">
</StackPanel>
<StackPanel Grid.Row="1" Orientation="Horizontal" FlowDirection="LeftToRight" Height="30" VerticalAlignment="Top">
<Button Style="{DynamicResource NoChromeButton}" Click="backBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" >
<Image Source="C:\...\arrow_left.png" Height="30" Width="40" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="RefreshBtn_Click" Margin="0,0,0,0" HorizontalAlignment="Left" >
<Image Source="C:\...\arrow_loop3.png" Height="30" Width="30" />
</Button>
<Button Style="{DynamicResource NoChromeButton}" Click="referThis" Margin="0,0,0,0" HorizontalAlignment="Left" HorizontalContentAlignment="Left" Height="30" Width="80">
<TextBlock>Refer Patient</TextBlock>
</Button>
</StackPanel>
<Border x:Name="contentPanel" BorderBrush="Green" BorderThickness="5" Background="{TemplateBinding Background}" Grid.Column="0" KeyboardNavigation.DirectionalNavigation="Contained" Grid.Row="2" KeyboardNavigation.TabIndex="2" KeyboardNavigation.TabNavigation="Local">
<ContentPresenter x:Name="PART_SelectedContentHost" ContentSource="SelectedContent" Margin="{TemplateBinding Padding}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</Border>
</Grid>
The above markup is nested inside the following structure at the top of the file:
<Window x:Class.... >
<Window.Resources>
<Style ...>
...
<Setter Property="Template">
<Setter.value>
<ControlTemplate TargetType="{x:Type TabControl}">
<!--(Above markup goes here) -->
Later in the file, I have the following markup:
</ControlTemplate>
</Setter.value>
</Setter>
</Style>
...
</Window.Resources>
<Grid Name = "grid">
<Image x:Name="Connected" Source="...\abc.png" Height="50" Width="50" Margin="750, 0, -5, 640"></Image>
<!-- A few more image tags here -->
<TabControl ... >
<!-- XML for each of the tab items & their content here -->
</TabControl>
</Grid>
</Window>
This XAML displays the following GUI:
As you can see from the image, the 'main content' of the page is overlapping the <StackPanel> where I have added buttons for the navigation, and other features of my application (back, refresh, etc).
I can resize the window, by dragging one of the corners, and adjust it so that the buttons and other features are all displayed correctly:
However, it is also possible to resize the window too much (i.e. make it too large), which causes too much white space to be displayed between these buttons and things, and also causes the images on the far right hand side to be moved to a different location than the one I had intended:
The images on the far right hand side of my application window are the ones displayed by the XAML markup in the third bit of code that I have copied into my question.
So, my question is- is there a way that I can 'fix' the size of the <StackPanel>, <Grid>, <Style> or header of the <TabPanel> where I am displaying the navigation buttons and other images so that they're not resized with the rest of the window when the user drags one of the corners of the window around?
I tried setting the Height property of the <TabControl> to a specific value (e.g. 50), but this caused the whole content of the <TabControl> to shrink to 50... i.e. all of the content of the window was then displayed in an area on the window that was only 50 pixels high...
Basically, I want the content that I have shown here to remain the same no matter how the user interacts with the application, and only the content displayed below this to be updated dynamically as the user interact with the application. Anyone have any suggestions?
Try setting the height of row 1 from 0.05* to Auto! That should solve the overlap issue.
So I have a rather interesting question. I have a viewbox that has a few elements in it (a custom user control for an image, a canvas, a label, and a textbox). What I want is to try and have all elements scale with the viewbox, but I want the label and the textbox to have a "Max Size." I have tried using a max width and height on these controls but they seem to ignore it. If someone could take a look at my code below an slap me for what I am doing wrong that would be appreciated.
<Viewbox Name="myViewBox" Stretch="Uniform">
<!--Grid used to track mouse movements in this element for other reasons -->
<Grid Name="grdViewboxGrid" MouseMove="trackMouse">
<Canvas Name="cvsViewboxCanvas" MinWidth="270" MinHeight="270"
VerticalAlignment="Top" HorizontalAlignment="Center"
Panel.ZIndex="1" Background="Black"
MouseUp="Canvas_MouseUp"
MouseMove="Canvas_MouseMove">
<Grid>
<!--Would rather not post here for Intellectual Property reasons-->
<!-- Extension of the image control -->
<CustomImageUserControl />
<Grid>
<Grid Width="{Binding LabelWidthPercentage}"
MaxWidth="50"
Height="{Binding LabelHeightPercentage"
MaxHeight="26"
SnapsToDevicePixels="True" VerticalAlignment="Top"
HorizontalAlignment="Left" Margin="5" IsHitTestVisible="False">
<Label Name="lblViewboxLabel" HorizontalAlignment="Left"
Padding="5,5,5,0" Margin="0,5,0,0"
Style="{x:Null}"
Content="{Binding lblContent}" />
</Grid>
<Grid>
<Grid Width="{Binding TextBoxWidthPercentage}"
MaxWidth="156"
Height="{Binding TextBoxHeightPercentage}"
MaxHeight="45"
SnapsToDevicePixels="True" Vertical="Top"
HorizontalAlignment="Right" Margin="5" IsHitTestVisible="False">
<Border Style="{DynamicResource CustomBorder}" />
<Grid>
<Textbox Name="txtViewboxTextBox" Text="{Binding txtViewbox}" />
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
</Canvas>
</Grid>
</Viewbox>
If I am not including something that is needed please let me know and I will update my question. Any help would be greatly appreciated this is now day 4 on this issue sadly :-(
I am not sure why you need so many overlapping Grids, but I hope that I can answer your question nevertheless:
In order to have the label left of the text box and to assign a maximum width to each of these two controls, use a Grid with two columns and set the MaxWidth property for each column. Then, assign the label to the left column (the one with index 0) and assign the text box to the right column (index 1). The corresponding code fragment looks like this:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition MaxWidth="30"/>
<ColumnDefinition MaxWidth="156" MinWidth="30"/>
</Grid.ColumnDefinitions>
<Label Grid.Column="0" x:Name="lblViewboxLabel" HorizontalAlignment="Left" Foreground="Yellow"
Padding="5,5,5,0" Margin="0,5,0,0"
Style="{x:Null}"
Content="{Binding lblContent}" />
<TextBox Grid.Column="1" x:Name="txtViewboxTextBox" Text="{Binding txtViewbox}" Background="Orange"/>
</Grid>
I also have assigned a MinWidth to the right column; this is necessary to make sure that the text box does not completely disappear if it contains no text.
I have the following XAML in my program
<Border x:Name="topCornerBorder" CornerRadius="10" Height="auto" Width="auto" Background="White">
<Grid x:Name="topCorner" Grid.Row="0" Grid.Column="0" Background="White" Margin="10,10,10,10">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="190*"/>
<ColumnDefinition Width="30*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="270*"/>
<RowDefinition Height="60*"/>
</Grid.RowDefinitions>
<StackPanel x:Name="StackPanel" Orientation="Vertical" Grid.Row="0" Grid.Column="1" >
<Canvas x:Name="textBlockCanvas1">
</Canvas>
</StackPanel>
<Canvas Grid.Row="1" Grid.Column="0" >
<sdk:DataGrid x:Name="dataGrid" Grid.Row="1" Grid.Column="0" Height="50" Width="300" Canvas.Top="15" Canvas.Left="100" Visibility="Collapsed" AutoGenerateColumns="False" ColumnWidth="*" RowBackground="Aqua"
VerticalContentAlignment="Center" HorizontalContentAlignment="Center" VerticalAlignment="Center" HorizontalAlignment="Center" CanUserResizeColumns="false" CanUserSortColumns="False" IsReadOnly="True" BorderThickness="3"
CanUserReorderColumns="False" HorizontalScrollBarVisibility="Hidden" VerticalScrollBarVisibility="Hidden">
<sdk:DataGrid.Columns>
<!--Column stuff here not important for this question..-->
</sdk:DataGrid.Columns>
</sdk:DataGrid>
</Canvas>
</Grid>
and i tried to set the transition by doing the following:
<telerik:RadTransitionControl Name="radTransitionControl" Duration="00:00:01" Content="{Binding topCornerBorder}" >
<telerik:RadTransitionControl.Transition >
<telerik:SlideAndZoomTransition/>
</telerik:RadTransitionControl.Transition>
</telerik:RadTransitionControl>
But nothing is happening. I also tried the following in the C# code behind:
radTransitionControl.Content = this.topCornerBorder;
But this results in an error "Value does not fall within expected range".
What do i have to do to successfully set the transition content property to the border that surrounds the rest of my UI elements?
It looks like you are using the Transition Control incorrectly.
The control is simply a content control which triggers an animation when the content changes.
Typically, you would break visuals up into individual User Controls, and set the content of the Transition Control at the appropriate time.
In the simplest example, you might have two UserControls (View1.xaml and View2.xaml). From code you would set
radTransitionControl.Content = new View1();
Then you would set
radTransitionControl.Content = new View2();
In the second set operation, you would expect to see the transition occur.
Note that none of the transitions will happen if the setters are called before the Transition Control has been loaded.
Also note that this Content="{Binding topCornerBorder} doesnt work because topCornerBorder is an element, and not a property.
Content="{Binding ElementName=topCornerBorder}
Is syntactically correct but will probably result in an exception because topCornerBorder is already part of the visual tree.
Well i was able to apply the transition to the border (and everything else inside of it) by simply doing:
radTransitionControl.PrepareAnimation();
I don't know if that's the correct way to do it but it's working so far.