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.
Related
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>
I'm creating a simple WPF Application on Visual Studio 2017 (Visual C#).
I have this form:
<Window x:Class="HelloWPFApp.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:HelloWPFApp"
mc:Ignorable="d"
Title="Greetings" Height="350" Width="525">
<Grid Height="319" VerticalAlignment="Bottom">
<Grid.RowDefinitions>
<RowDefinition Height="192*"/>
<RowDefinition Height="41*"/>
<RowDefinition Height="86*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<TextBlock HorizontalAlignment="Center" TextWrapping="Wrap" Text="Select a message option and then choose the Display button." VerticalAlignment="Center" Height="16" Width="329" Margin="102,131,86,45"/>
<RadioButton x:Name="rbHello" Content="Hello" HorizontalAlignment="Left" Margin="102,2,0,0" VerticalAlignment="Top" Height="15" Width="47" Grid.Row="1"/>
<RadioButton x:Name="rbGoodbye" Content="Goodbye" HorizontalAlignment="Left" Margin="337,2,0,0" VerticalAlignment="Top" Height="15" Width="67" Grid.Row="1"/>
<Button Content="Display" HorizontalAlignment="Left" VerticalAlignment="Top" Width="75" Margin="231,2,0,0" Click="Button_Click" Height="20" Grid.Row="2"/>
</Grid>
</Window>
and this is the preview:
When I compile this is the result in a window
and if I try to use fullscreen it display me this:
Why it do this? How can I resolve it?
(This is an example from Microsoft Documentation!)
This is WPF not windows forms. And your positioning is all wrong. When you drag and drop stuff it uses absolute positioning. If you want it on the center use <Grid VerticalAlignment="Center" HorizontalAlignment="Center">
But here is a good place to start learning the system
I'm trying to reduce my window size to 70%, in which there will be an image that will be stretched for 100% width and 30% (below the image) height, in which there is a stack panel containing some controls.
<Window x:Class="CapManageR.Video"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Video" Height="500" Width="1000"
Loaded="Window_Loaded" Closing="Window_Closing">
<Grid Name="grid1">
<Image Source="c://a.png" HorizontalAlignment="Stretch" Height="700"></Image>
<StackPanel Height="300" HorizontalAlignment="Stretch">
<Slider x:Name="horizSlider"
Minimum="0"
Maximum="100"
Value="50"
LargeChange="10"
SmallChange="1"
Width="200"
Margin="186,356,406,51"
PreviewMouseUp="horizSlider_PreviewMouseUp"/>
</StackPanel>
</Grid>
</Window>
I don't really know how to solve this. The above is my code so far. It is not really working. Can someone help so it will be proportional even upon resizing?
<Grid Name="grid1">
<Grid.RowDefinitions>
<RowDefinition Height="70*" />
<RowDefinition Height="30*" />
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="c://a.png" Stretch="Fill" />
<StackPanel Grid.Row="1" >
....
</StackPanel>
</Grid>
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.