I am trying to create an UWP User Control for the first time. One very basic thing I want is automatic Width and Height at DESIGN-TIME and RUN-TIME based on the content of the user control. Simple enough in theory, but whenever I build the control and drop it on a form, it has this default "Width=100" value. Same thing with the Height.
Here is the simple XAML code i have so far:
<UserControl
x:Class="JTE.JTreeItem"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:JTE"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Width="Auto"
d:DesignHeight="300"
d:DesignWidth="400">
<Grid>
<TextBlock HorizontalAlignment="Left" Margin="10,32,0,0" Text="TextBlock" TextWrapping="Wrap" VerticalAlignment="Top"/>
</Grid>
</UserControl>
But when I drag the control from the toolbox to a page this is what I get:
<local:JTreeItem HorizontalAlignment="Left" Height="100" Margin="247,305,0,0" VerticalAlignment="Top" Width="100"/>
Both the Width and the Height are 100 by default. But why? How can I change this? This seems so simple, yet adding:
Width="Auto"
Does not solve this. Removing it does not solve it. Any value I put there gets ignored, for example, if I do this:
Width="199"
Nothing happens. I get the same 100 default value for the Width and the Height.
Why is this so not intuitive? There seems to be no syntax errors in the XAML, so what is happening there?
I am using Visual Studio Community 2019.
If any of you can help, I would appreciate it. Thanks in advance!!!
EDIT: Added a few things for clarity.
Related
I'm trying to use a Microsoft.Toolkit.Wpf.UI.Controls.WebView control in a wpf desktop application. It seems to use substantially less resouces than the webbrowser control and is much more up to date, being based on edge. However, unlike the webbrowser control, it won't scroll unless selected. i.e. When the mouse is over the webbrowser I can scroll up and down without selecting first but webview ignores the mouse wheel if it isn't the current selected control.
Using VS2019 the following code demonstrates the problem.
<Window x:Class="test0.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
Title="MainWindow" Height="600" Width="1024">
<Grid>
<StackPanel>
<Button Content="hello world" Height="100" />
<WPF:WebView Source="https://bing.com" Height="250" />
<WebBrowser Source="https://bing.com" Height="250" />
</StackPanel>
</Grid>
</Window>
On running, both browser controls will scroll when the mouse cursor is over. After clicking the button (removing the focus from either of the browsers), only the webbrowser control scrolls on mouseover.
Is there any workaround to fix this?
Using: .NET Framework 4.7.2 and Microsoft.Toolkit.Wpf.UI.Controls.WebView 5.1.1
Problem solved! But nothing to do with VS, or framework versions etc. It seems the touchpad driver doesn't play nice with the webview control under some circumstances. It was remiss of me not to mention I was using a touchpad vs a genuine mouse but it never occurred to me there would be a difference. Until I plugged in a mouse and there was no problem.
Anyway, the solution was to download and install precision touchpad drivers as per:
https://www.windowscentral.com/how-enable-precision-touchpad-drivers
Which solved the problem... Until windows decided to "update" the driver back to the old one. The only way to stop windows doing this was to disable "Automatic driver downloads" as per:
https://www.laptopmag.com/articles/disable-automatic-driver-downloads-on-windows-10
I wish I had mentioned I was using a touchpad as I suspect the problem might have been more easily reproducible for those who aren't using precision touchpad drivers.
I have created a sample page and also give code in the answer as per your requirement please review existing code and get back to me if there are any queries.
<Window x:Class="WpfApp1.MainWindow"
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"
xmlns:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="720" Width="1280">
<Grid>
<StackPanel>
<Button Content="hello world" Height="100" />
<!--<WPF:WebView Source="https://learn.microsoft.com/en-us/dotnet/csharp/whats-new/csharp-8" Height="250" />-->
<WPF:WebView Source="https://bing.com" Height="250" />
<WebBrowser Source="https://bing.com" Height="250"/>
</StackPanel>
</Grid>
Bing is a one view site so the search panel is not able to scroll even if you can directly check in on web browser.
Edit:
Can you please check your windows version and SDK as per requirements
https://learn.microsoft.com/en-us/uwp/api/windows.web.ui.interop.webviewcontrol
Windows version: 1809
SDK version: 17763
Added values:
AddInitializeScript
GotFocus
LostFocus
I do believe this is what you're looking for.
You'll want to define Row Definitions for your Grid as you see below and assign the what I assume is going to be your toolbar with "hello world" into Grid Row 0 and your web browser into Grid Row 1 rather than using the Stack Panel in this scenario (see code below).
Let me know if that helps or if you need it done a little differently I'm sure I could help you figure that out.
Grid Row Definitions - Microsoft Docs
<Window x:Class="WpfApp1.MainWindow"
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:WPF="clr-namespace:Microsoft.Toolkit.Wpf.UI.Controls;assembly=Microsoft.Toolkit.Wpf.UI.Controls.WebView"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800" WindowState="Maximized">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Content="hello world" Height="100" Grid.Row="0"/>
<WebBrowser Source="https://bing.com" Grid.Row="1"/>
<WPF:WebView Source="https://bing.com" Grid.Row="2"/>
</Grid>
</Window>
I have read your query and try to figure out some issues. Kindly check your windows and SDK version HERE.
Your windows version must have above or 1809
Your SDK version must have above or 17763
Please let me know in case any doubt or confusion.
Following picture shows my project.
Here is XAML code for your testing needs.
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="200" Width="525">
<ScrollViewer Name="ScrollViewer1" Height="67" VerticalAlignment="Top">
<StackPanel>
<TextBox Name="TextBox1" Text="TextBox1"/>
<TextBox Name="TextBox2" Text="TextBox2"/>
<TextBox Name="TextBox3" Text="TextBox3"/>
<TextBox Name="TextBox4" Text="TextBox4"/>
<TextBox Name="TextBox5" Text="TextBox5"/>
<TextBox Name="TextBox6" Text="TextBox6"/>
</StackPanel>
</ScrollViewer>
</Window>
Following picture shows my question;
So, how to click WPF ScrollViewer down button in order to go end of ScrollViwer?
A solution could be to subscribe to the click of that button like here https://stackoverflow.com/a/4932118/6890102, then call the ScrollToEnd() method of the ScrollViewer. But there might be a better solution.
Right-Click on ScrollViewer->Edit Template->Edit a Copy, to see the Scrollviewer's Template. The ScrollViewer contains a ScrollBar. A ScrollBar contains, RepeatButton, and a Track. The RepeatButton is responsible for the up and down movement of the scrollbar. Try checking it. You may find some idea on how to implement your objective.
I am working on a WPF application in which a user control is loaded over main window at run time.
I have a TextBox in the UserControl which is supposed to be a editable TextBox. But I am not able to edit it using keyboard input. Whereas, i am able to set the text pragmatically.
I have refered MSDN forum regarding the issue. Still i am not able to get through. My code is similar to one in the link above.
Please share your thoughts to get this done.
Thanks in advance.
Edit:
xaml code:
<UserControl x:Class="UserControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
mc:Ignorable="d"
Loaded="UserControl_Loaded"
FocusManager.IsFocusScope="True"
FocusManager.FocusedElement="{Binding ElementName=TestTxt}">
<Grid FocusManager.IsFocusScope="True">
<StackPanel Orientation="Horizontal" FocusManager.IsFocusScope="True">
<TextBox x:Name="TestTxt" IsReadOnly="False" IsEnabled="True" FocusManager.IsFocusScope="True"/>
</StackPanel>
</Grid>
In UserControl_Loaded add TestTxt.Focus();
I develop on VS2010 WPF on Window 7. I have a project that does not throw any error or warning, compile fine, XAML design shows fine except I cannot click or select anyone controls in the XAML design view.
What is the reason, or how can I find out the problem or possible exception?
Had the same problem, I was able to select controls in the VS2012 WPF project previously but something had changed.
Worked out it was a TabItem in a TabControl, I had set the visibility to collapsed
<TabItem Visibility="Collapsed">
to hide the tab header at the top. Setting the TabItem visibility back to visible
<TabItem Visibility="Visible">
allows controls contained in the TabItem to be selected in the XAML design view.
I have reproduced this behavior by putting an empty grid as the last child element of my "main" Grid. In VS2010's designer, I cannot select any of the Buttons. Could this be your issue?
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Button Content="Button" Height="52" HorizontalAlignment="Left" Margin="93,74,0,0" Name="button1" VerticalAlignment="Top" Width="113" />
<Button Content="Button" Height="38" HorizontalAlignment="Left" Margin="280,100,0,0" Name="button2" VerticalAlignment="Top" Width="96" />
<Grid></Grid> <!-- THIS IS THE PROBLEM!!! -->
</Grid>
</Window>
Had this recently, building the project seemed to fix the problem.
Do you have a Pointer in your toolbox? Sometimes the Pointer item inside the toolbox is gone. So the next item (Border) is selected. So when you try to click, you are actually trying to add a border to the design. You might try resetting the toolbox. But be warned, custom tools are gone then, and have to be added again. (I could not make a comment to this question, so thats the reason I 'answered')
I've got a grid with several TextBoxes in it. I want to keep this grid fixed at the bottom of my main window. So if the user scrolls down the grid should basically stay in it's place.
One way I thought of doing this was to get some sort of value from the ScrollViewer and add it to the grids Canvas.TopProperty. However I am not sure which value changes when the user scrolls up or down.
Then don't put the scroll on the main window. Put ScrollViewer only on the content (rows) that you want to scroll. Careful not to use an auto for the height of the rows with the ScrollViewer or the container will grow to support all the content and the Scroll does not come into play.
One way:
<Window x:Class="Sample.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Window1" Height="300" Width="300">
<Grid>
<ListBox>
<!--Hardcoded listbox items just to force the scrollbar for demonstration purposes -->
<ListBoxItem>Item1</ListBoxItem>
<ListBoxItem>Item2</ListBoxItem>
<ListBoxItem>Item3</ListBoxItem>
<ListBoxItem>Item4</ListBoxItem>
<ListBoxItem>Item5</ListBoxItem>
<ListBoxItem>Item6</ListBoxItem>
<ListBoxItem>Item7</ListBoxItem>
<ListBoxItem>Item8</ListBoxItem>
<ListBoxItem>Item9</ListBoxItem>
<ListBoxItem>Item10</ListBoxItem>
<ListBoxItem>Item11</ListBoxItem>
<ListBoxItem>Item12</ListBoxItem>
<ListBoxItem>Item14</ListBoxItem>
<ListBoxItem>Item15</ListBoxItem>
<ListBoxItem>Item16</ListBoxItem>
<ListBoxItem>Item17</ListBoxItem>
<ListBoxItem>Item18</ListBoxItem>
<ListBoxItem>Item19</ListBoxItem>
<ListBoxItem>Item20</ListBoxItem>
<ListBoxItem>Item21</ListBoxItem>
<ListBoxItem>Item22</ListBoxItem>
</ListBox>
<Grid Panel.ZIndex="5" VerticalAlignment="Bottom" Background="DarkGray">
<StackPanel>
<TextBox HorizontalAlignment="Left" VerticalAlignment="Center">Text box 1</TextBox>
<TextBox HorizontalAlignment="Left" VerticalAlignment="Center">Text box 2</TextBox>
<TextBox HorizontalAlignment="Left" VerticalAlignment="Center">Text box 3</TextBox>
</StackPanel>
</Grid>
</Grid>