I have a MainWindow with a couple of radio buttons, a ContentControl and a button to change the content of ContentControl.
I also have a UserControl1 with a label on it. When I click the button on MainWindow to change the ContentControl.Content to UserControl1, it shows the label on top of the radio buttons I have from MainWindow. How can I change this so it acts like a page and does not stack each control on top of each other?
MainWindow.xaml:
<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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Height="540" Margin="0,10,-6,-19" Width="968">
<StackPanel Height="74" Margin="731,446,0,0" VerticalAlignment="Top" Width="229" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Back" MinWidth="100" Margin="10,20,0,0"/>
<Button Content="Next" MinWidth="100" Margin="10,20,0,0" Click="NextBtnClick"/>
</StackPanel>
<RadioButton x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" Margin="312,130,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
<RadioButton x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" Margin="312,232,95,0" VerticalAlignment="Top" Height="76" Width="561" FontSize="48" FontWeight="Bold" GroupName="1"/>
<ContentControl x:Name="contentControl" Grid.Row="1"/>
</Grid>
</Window>
MainWindow.xaml.cs:
private void NextBtnClick(object sender, RoutedEventArgs e)
{
if (RadioBtn2.IsChecked == true)
{
this.contentControl.Content = new UserControl1();
}
}
After clicking the next button, I get the controls from UserControl1 stacked on top of the radio buttons.
I'm quite new to WPF so any help would be greatly appreciated. Navigating through the docs is a nightmare because I'm not sure how to tackle this problem.
You can trying to use Grid panel without defining rows and column definitions. As per your code, you are trying define the panel layout by hardcoded Margin, Width and Height. That's why contorls are rendered on top of each other.
I've changed the Grid code to define the Row Definitions so that controls are stacked on row basis. So when you click on Button the ContentContrl is loaded to last Row so (which is defined as Height="*" via RowDefinition to take the remaining space)
You can read about WPF Panels and Grid layout at internet. This can be a good start.
<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:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:local="clr-namespace:Test"
mc:Ignorable="d"
Title="Test" WindowStartupLocation="CenterScreen" Width="968" Height="560" HorizontalAlignment="Center" VerticalAlignment="Center">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Margin="10 10 10 10">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions?
<StackPanel Grid.Row="0" Orientation="Horizontal" HorizontalAlignment="Left">
<Button Content="Back" MinWidth="100" />
<Button Content="Next" MinWidth="100" Click="NextBtnClick"/>
</StackPanel>
<RadioButton Grid.Row="1" x:Name="RadioBtn1" Content="Radio1" HorizontalAlignment="Center" VerticalAlignment="Top" FontWeight="Bold" GroupName="1"/>
<RadioButton Grid.Row="2" x:Name="RadioBtn2" Content="Radio2" HorizontalAlignment="Center" FontSize="48" FontWeight="Bold" GroupName="1"/>
<ContentControl x:Name="contentControl" Grid.Row="3"/>
</Grid>
</Window>
Related
I have a Page that allow the user to load multiple images thumbnails from his folders.
The number of rows update nicely when the width of the window is changed
The only thing that I could not figure out how to make it work is having the vertical scroll bars, I pretty much tried every settings possible.
At first my root was a stackPanel so I switched to a Grid to see if there would be any difference.
here is my xaml
<Page
x:Class="IMG.Pages.UploadPage"
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:img="using:IMG"
xmlns:local="using:IMG.Pages"
xmlns:Models="using:IMG.Models"
mc:Ignorable="d"
Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
<Grid x:Name="root">
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<StackPanel Grid.Row="0"
Padding="2"
BorderBrush="Black"
BorderThickness="1"
Orientation="Horizontal">
<Button Click="GetPhoto" Content="get images" />
</StackPanel>
<GridView x:Name="ImageGrid" Width="Auto" Background="LightBlue" Grid.Row="1" Margin="5" Height="Auto"
SizeChanged="ImageGridSizeChanged"
ScrollViewer.HorizontalScrollBarVisibility="Auto"
ScrollViewer.HorizontalScrollMode="Auto"
ScrollViewer.VerticalScrollBarVisibility="Disabled"
ScrollViewer.VerticalScrollMode="Disabled">
<GridView.ItemsPanel>
<ItemsPanelTemplate>
<ItemsWrapGrid Orientation="Horizontal"/>
</ItemsPanelTemplate>
</GridView.ItemsPanel>
<GridView.ItemTemplate>
<DataTemplate x:Name="ImgThumbnail" x:DataType="Models:ImageData">
<StackPanel
Width="100"
Height="120"
Margin="5"
AutomationProperties.Name="{x:Bind Hash}">
<StackPanel Margin="1">
<TextBlock Text="{x:Bind File}" />
</StackPanel>
<Image x:Name="thumbIMG" Width="80" Height="100" Stretch="UniformToFill" />
</StackPanel>
</DataTemplate>
</GridView.ItemTemplate>
</GridView>
</Grid>
At first the gridview is empty, the user click on the button and then in the FileOpenPicker he can choose multiple images and they are added as thumbnail binded to an ObservableList of ImageData
The binding work nicely, I am simply stuck on the scrollbar
I have experienced the same issue and I fixed it by setting the height of the gidview on the fix size instead of auto. And than you can set
ScrollViewer.VerticalScrollBarVisibility = "Visible"
ScrollViewer.VerticalScrollMode = "Enable"
I am new to WPF and suddendly my Window is not clickable anymore.
I cannot click one button and I cannot edit a text box.
I am using Visual Studio 2015 (new to it as well).
What could be the reason?
here some code:
<Window x:Class="Mxx.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:Mxx"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="26*"/>
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="Log out" Click="MenuItem_Click1"/>
<MenuItem Header="Option 2">
<MenuItem Header="Load new control" Click="MenuItem_Click2a"/>
<MenuItem Header="Open new window" Click="MenuItem_Click2b"/>
</MenuItem>
</Menu>
<Border x:Name="Stage" Grid.Row="1"/>
<Grid x:Name="LoginLayer" Background="#FFFFFFFF" Grid.RowSpan="2">
<Grid HorizontalAlignment="Center" VerticalAlignment="Center" Background="LightBlue">
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Text="Mxx" Grid.ColumnSpan="2" FontWeight="Bold" HorizontalAlignment="Center" Margin="5" FontSize="20"/>
<TextBlock Text="Name" Grid.Row="1" Margin="3"/>
<TextBox x:Name="txtName" Grid.Row="1" Grid.Column="1" Margin="3" MinWidth="100" HorizontalAlignment="Left"/>
<TextBox x:Name="txtName1" Background="Azure" Grid.Row="4" Grid.Column="1" Margin="3" MinWidth="100" HorizontalAlignment="Left"/>
<TextBlock Text="Password" Grid.Row="2" Margin="3"/>
<PasswordBox x:Name="txtPassword" Grid.Column="1" Grid.Row="2" Margin="3" MinWidth="100" HorizontalAlignment="Left"/>
<Button Click="Login_Click" Content="Log in" Grid.Row="3" Grid.Column="1" Margin="3"/>
</Grid>
<TextBlock x:Name="lat1" Text="lat" Grid.Row="4" Margin="3" />
</Grid>
</Grid>
and here my main window
public MainWindow()
{
InitializeComponent();
_geoLocator = new Geolocator();
Utils.getNetworkAdapterId();
Debug.WriteLine("imei: " + Properties.Settings.Default.imei);
Properties.Settings.Default.imei = "imei1";
Properties.Settings.Default.Save(); // Saves settings in application setting
}
my debugger hits the last line
Your problem is with the last declared TextBlock
<TextBlock x:Name="lat1" Text="lat" Grid.Row="4" Margin="3" />
That is outside of the grid that has row and column definitions, and so it is defaulting to taking up all the space in the page as an overlay. You are unable to give focus to the controls beneath it.
You can see this in the XAML editor window. In the code view, click on that element, and in the designer you will see that the textblock is the full size of your window. Because it is declared last in the XAML, it take the uppermost position (z-index) and therefore "hides" the controls behind it.
You have a TextBlock covering the other controls. I think you want to move lat1 into the /Grid tag directly above it.
How do I set a wpf text box to resize automatically when the user changes the size of dialog box?
<Window x:Class="MemoPad.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="LightGray"
Title="Window1" Height="350" Width="700" >
<StackPanel Orientation="Vertical">
<Menu DockPanel.Dock ="Right">
<MenuItem Header="Find" x:Name="gMNuFind" />
</Menu>
<Button Content=" Find "
Margin="5,10,5,5"
x:Name="gBuFind"
/>
<TextBox Margin="0,0,0,0"
HorizontalAlignment="Left"
VerticalAlignment="Top"
MinHeight="270" MinWidth="690"
x:Name = "gTBxInfo"
TextWrapping="Wrap"
AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
/>
</StackPanel>
Or change StackPanel to Grid
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Background="LightGray"
Title="Window1" Height="350" Width="700" >
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition Height="1*" />
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="Find" x:Name="gMNuFind" />
</Menu>
<Button Grid.Row="1" Content=" Find "
Margin="5,10,5,5"
x:Name="gBuFind"
/>
<TextBox Grid.Row="2" Margin="0,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
MinHeight="270" MinWidth="690"
x:Name = "gTBxInfo"
TextWrapping="Wrap"
AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
/>
</Grid>
</Window>
Remove MinHeight and MinWidth from the TextBox, and change HorizonalAlignment to Stretch
<TextBox Margin="0,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Top"
x:Name = "gTBxInfo"
TextWrapping="Wrap"
AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Auto" />
Edit:
If you want to resize the TextBox in both directions (horizontally and vertically), you would have to use a different container other than StackPanel, so that the TextBox sizing is independent.
Something like this:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Menu>
<MenuItem Header="Find" x:Name="gMNuFind" Grid.Row="0"/>
</Menu>
<Button x:Name="gBuFind"
Content=" Find "
Margin="5,10,5,5"
Grid.Row="1"/>
<TextBox x:Name = "gTBxInfo"
Margin="0,0,0,0"
HorizontalAlignment="Stretch"
VerticalAlignment="Stretch"
TextWrapping="Wrap"
AcceptsReturn="True"
ScrollViewer.VerticalScrollBarVisibility="Auto"
Grid.Row="2"/>
</Grid>
i have a list of users that are bound to a listbox(image and the name of the user) and i want to render this lisbox clickable so whnever i click on a user's image i will be redirected
to his account.
this is the user control that displays the users:
<UserControl x:Class="Navigateur.Presentation.UserControlWork.ListeEnfControl"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:conv="clr-namespace:Navigateur.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" Height="Auto" Width="Auto"
>
<UserControl.Resources>
<conv:ByteArrayToImageConverter x:Key="bytearraytoImageConverter" />
</UserControl.Resources>
<Grid >
<ListBox x:Name="_imageList" Margin="10,10,10,0" IsSynchronizedWithCurrentItem="True" ScrollViewer.HorizontalScrollBarVisibility="Visible" VerticalAlignment="Top" Height="250" BorderThickness="0" MouseLeftButtonDown="Click_Kid" >
<ListBox.ItemTemplate>
<DataTemplate DataType="Enfant">
<Border CornerRadius="30">
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<Image Grid.Row="0" x:Name="image" Source="{Binding avatar}" Width="50" Height="80"/>
<TextBlock Grid.Row="1" x:Name="nom" Text="{Binding prenom}" VerticalAlignment="Center"/>
</Grid>
</Border>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
</Grid>
</UserControl>
Use Button in place of Image and override template of Button to give it an Image look, so that you can have clickable image.
<Button Grid.Row="0" Width="50" Height="80">
<Button.Template>
<ControlTemplate>
<Image x:Name="image" Source="{Binding avatar}"/>
</ControlTemplate>
</Button.Template>
</Button>
If you are using MVVM, you can bind Command with button OR if want to do in code behind you can hook Click event of button to determine which image is clicked on.
I have an image that is bigger than it's window container and it is placed in a ScrollViewer, however, the image does not scroll at all. I've tried putting the image in a container with no luck. What settings am I missing here? (I copied the code straight from MS, but they have it wrong)
Here's the code:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:h="http://helixtoolkit.codeplex.com" x:Class="TileLayout"
Title="TileLayout" Height="1000" Width="845" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow">
<StackPanel HorizontalAlignment="center" VerticalAlignment="Top">
<StackPanel Orientation="Horizontal" >
<TextBox x:Name="txtSourceFilePath" Width="500" Margin="10" Height="22" TextChanged="TextBox_TextChanged" Text="E:\projects\Test3D\SavedSnapshots\snapshot.png"/>
<Button x:Name="btnPickFile" Width="100" Margin="0,10,10,10" Content="Pick File" ></Button>
</StackPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto" >
<Image x:Name="imgFinal" Source="SteelMotion_chevron2.png"/>
</ScrollViewer>
</StackPanel>
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:h="http://helixtoolkit.codeplex.com" x:Class="TileLayout"
Title="TileLayout" Height="1000" Width="845" WindowStartupLocation="CenterScreen" WindowStyle="ThreeDBorderWindow">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<StackPanel Orientation="Horizontal" Height="50" HorizontalAlignment="Center" VerticalAlignment="Top" Grid.Row="0">
<TextBox x:Name="txtSourceFilePath" Width="500" Margin="10" Height="22" TextChanged="TextBox_TextChanged" Text=""/>
<Button x:Name="btnPickFile" Width="100" Margin="0,10,10,10" Content="Pick File" ></Button>
</StackPanel>
<ScrollViewer VerticalScrollBarVisibility="Auto" Grid.Row="1" >
<Image x:Name="imgFinal" Source="SteelMotion_chevron2.png" Width="768" Height="1408"/>
</ScrollViewer>
</Grid>
You need to specify the size of the ScrollViewer.
In this case ScrollViewer and Image are same size, so the scroll bar does not show.