I have a WPF project.
In this project I have a UserControl with a StackPanel containing various elements. It's within a cell in a Grid. When i resize the Windwo and the Cell becomes to small to fit the Stackpanel I want the scrollview to take over.
I tried putting TheUserControl in a but that only seems to work with Set size. I need it to adjust to the dynamic cell size. All "Solutions" I found online have been unnecessary difficult workarounds for such a simple and commen problem. So I'm pretty sure that there is an easy way to achive this behaviour.
Pseudo-Code
The UserControl:
<UserControl x:class=x.TheUserControl>
<StackPanel>
<Label Content="Label 01 />
<Label Content="Label 02 />
<Label Content="Label 03 />
.
.
.
<Label Content="Label n />
</StackPanel>
</UserControl>
The Window:
<Window x:Class="x.MainWindow>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Header" />
<ScrollView Grid.Row="1">
<x:TheUserControl />
</ScrollView>
</Window>
I'm pretty sure ScrollView works just fine when i put a StackPAnel directly into the ScrollView, so why is it so complicated with a UserControl inbetween?
I'm properly unaware of some obvious behavior in ScrollView and I would be really glad if someone could show me a better approach or explain why it beahaves this way.
Please try to use the ScrollViewer inside of your usercontrol and use HorizontalScrollBarVisibility & VerticalScrollBarVisibility:
userControl:
<UserControl x:Class="WpfApp1.TheUserControl"
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"
xmlns:local="clr-namespace:WpfApp1"
>
<Grid>
<ScrollViewer HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto">
<StackPanel Orientation="Vertical" Background="LightGray">
<Label Content="Label 01" />
<Label Content="Label 02" />
<Label Content="Label 03" />
<Label Content="Label n" />
</StackPanel>
</ScrollViewer>
</Grid>
</UserControl>
MainWindow:
<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:local="clr-namespace:WpfApp1"
mc:Ignorable="d"
Title="MainWindow" >
<Grid Background="Aqua">
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Label Content="Header" Grid.Row="0" />
<local:TheUserControl Grid.Row="1" />
</Grid>
</Window>
Result, if you resize the window:
Related
I have a problem with displaying the Russian language in the Win UI 3 application
Here is the MainWindow.xaml file
<Window
x:Class="test.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:local="using:test"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="32" />
<RowDefinition />
</Grid.RowDefinitions>
<NavigationView
Grid.Row="1"
IsBackButtonVisible="Collapsed"
IsSettingsVisible="False">
<StackPanel x:Name="TitleBar" VerticalAlignment="Center">
<TextBlock Text="привет" />
<TextBox
Width="300"
Margin="8"
PlaceholderText="привет" />
<TextBox
Width="300"
Margin="8"
PlaceholderText="привет" />
</StackPanel>
</NavigationView>
</Grid>
</Window>
Actually, I'm not sure if the problem is in this file, but I have no other ideas
You can try to change the encoding of visual studio, or install the Force UTF-8 visual studio extension
So I'm trying to get the same effect as a tab control where the button kinda merges into the frame seamlessly.
If we look at this one, we can see that there is nothing cutting off the "Red" button from the frame. It kinda just goes into the frame
To be more explicit, this is what I'm focusing on
And I wanted to accomplish the same effect with buttons and a frame but I'm not sure how to do it.
What's the proper way of accomplishing the same effect? Is there a style I should inherit from?
This is what I have
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<StackPanel>
<Button Height="50"/>
<Button Height="50"/>
<Button Height="50"/>
<Button Height="50"/>
</StackPanel>
<StackPanel Grid.Column="1">
<Frame/>
</StackPanel>
</Grid>
Sample for your screenshot
<Window x:Class="TabControl.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:local="clr-namespace:TabControl"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Grid>
<DockPanel>
<TabControl TabStripPlacement="Left">
<TabItem Header="Header 1">
<Label Content="Text write here..." />
</TabItem>
<TabItem Header="Header 2" />
<TabItem Header="Header 3" />
<TabItem Header="Header 4" />
</TabControl>
</DockPanel>
</Grid>
</Window>
Just faced with a following issue:
I've tried to resize my simpliest WPF app and noticed that controls are not responsive at all.
Note: I've tried symbiosis of various controls like Grid, WievBox, Canvas etc., to no avail.
here is XAML code, to be exact controls which I need to get resizable (responsive) correspondingly different resolutions (aspect ratios).
<Window x:Class="WpfApplication6.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:local="clr-namespace:WpfApplication6"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920" WindowStartupLocation="CenterScreen" >
<Grid>
<Ellipse HorizontalAlignment="Left" Height="100" Margin="576,278,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
<Rectangle HorizontalAlignment="Left" Height="100" Margin="559,518,0,0" Stroke="Black" VerticalAlignment="Top" Width="100"/>
<Label x:Name="label" Content="Label" FontStretch="Normal" FontSize="24" HorizontalAlignment="Left" Margin="595,230,0,0" VerticalAlignment="Top" Height="43" Width="64"/>
<Button x:Name="button" Content="Button" FontSize="24" HorizontalAlignment="Left" Margin="720,427,0,0" VerticalAlignment="Top" Width="83" Height="38"/>
</Grid>
P.S. Such writers as Nathan and McDonald in their books are broadcasting that WPF that's you need for adaptive and responsive application making. However, I'm in doubts after couple of days of looking for solution. I think WPF not much went ahead in contrast with Windows Form at least in terms of adaptation and responsiveness of applications.
So could someone help me in that matter.
Thanks in advance!
Don't use Margin to position controls, use your grid properties like ColumnDefinition and RowDefinition with things values like Auto and *
<Grid.ColumnDefinitions>
<ColumnDefinition Width="2*" />
<ColumnDefinition Width="1*" />
<ColumnDefinition Width="1*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="2*" />
<RowDefinition Height="1*" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
Nice little tutorial
Use RowDefinition and ColumnDefiniton for your Grid control instead of using Margin to place your controls. Also replace the Height and Width properties for the Ellipse and Rectangle with Stretch.
<Window x:Class="WpfApplication6.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:local="clr-namespace:WpfApplication6"
mc:Ignorable="d"
Title="MainWindow" Height="768" Width="1024" MinHeight="768" MinWidth="1024" MaxHeight="1080" MaxWidth="1920" WindowStartupLocation="CenterScreen" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Ellipse Grid.Row="0"
Stretch="Fill"
Stroke="Black" />
<Rectangle Grid.Row="1"
Stretch="Fill"
Stroke="Black" />
<Label Grid.Row="2"
x:Name="label"
Content="Label"
FontStretch="Normal"
FontSize="24" />
<Button Grid.Row="3"
x:Name="button"
Content="Button"
FontSize="24" />
</Grid>
</Window>
Thanks guys, of course, however it's not a solution. See screens below.
As you can see , all important to me controls "swam" to left.
I'm following tutorial and noticed that Sample Data doesn't work in VS 2015 Blend as in 2013 Blend. In tutorial and probably all guides by Microsoft all they say is to drag-n-drop sample data collection on ListBox and data magically is there rendered, however for me that doesn't work, nothing changes visually. In properties there is ItemSource changed to sample data one, but that's pretty much it.
Here's my sample data
And here's current result of it
Full XAML of page
<Page
x:Class="TutorialApp.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:TutorialApp"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="LayoutRoot" Background="Transparent" DataContext="{Binding Source={StaticResource CarData}}">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<StackPanel x:Name="TitlePanel" Grid.Row="0" >
<TextBlock Text="Car Voter" Style="{StaticResource TitleTextBlockStyle}"/>
<TextBlock Text="OverView" Style="{StaticResource SubheaderTextBlockStyle}" />
</StackPanel>
<Grid x:Name="ContentPanel" Grid.Row="1">
<ListBox ItemsSource="{Binding Collection}" SelectedIndex="-1" Background="#00FFFFFB" DataContext="{StaticResource CarData}"/>
</Grid>
</Grid>
I'm new to WPF, and I am creating a user control as follows:
<UserControl x:Class="WpfApplication3.MyUserControl"
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"
x:Name="MyUserControl2"
d:DesignHeight="300" d:DesignWidth="300" Background="Coral">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="20"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Button Content="a" Grid.Row="0"/>
<Button Content="b" Grid.Row="1"/>
<Button Content="c" Grid.Row="2"/>
<ContentPresenter Grid.Row="3"/>
</Grid>
This produces the following layout, when the orange area is the content preseter:
In the main window that uses the user control, I want to inject controls into the content preseter
<Window x:Class="WpfApplication3.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication3"
Title="MainWindow" Height="350" Width="525">
<Grid>
<local:MyUserControl>
<local:MyUserControl.Content>
<Button Content="d"/>
</local:MyUserControl.Content>
</local:MyUserControl>
</Grid>
I would expect the get the following layout:
but instead the entire user control gets overlapped by button d.
How do I manage to do so?
Try placing button itself in Main Window -
<Grid>
<local:MyUserControl/>
<Button Content="d"/>
</Grid>
OR
<Grid>
<Grid.Resources>
<DataTemplate x:Key="MyContent">
<Button Content="d"/>
</DataTemplate>
</Grid.Resources>
<local:MyUserControl/>
</Grid>
and in your User Control -
<ContentPresenter Grid.Row="3" ContentTemplate="{DynamicResource MyContent}"/>
I'm pretty sure that that won't work. When you set the content of MyControl to the button you're saying that the whole content of the user control should be the Button. I think you need to have a property on your user control then bind the contentpresenter to that.
So Something like MyUserControl.SubContent {get; set;} then you can bind the ContentPresenter to that.