I have following code:
<Window x:Class="WpfApplication5.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:WpfApplication5"
mc:Ignorable="d"
Title="MainWindow" Height="350" Width="525">
<Grid>
<TabControl>
<TabControl.Items>
<TabItem>
<TabItem.Header>tabItem1</TabItem.Header>
<TabItem.Content>
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<WrapPanel>
<Image Source="RentgenogramOfWrist.jpg" Width="500"></Image>
<Button Width="300" Height="300"/>
</WrapPanel>
</ScrollViewer>
</TabItem.Content>
</TabItem>
<TabItem>
<TabItem.Header>tabItem2</TabItem.Header>
<TabItem.Content>
<ScrollViewer HorizontalScrollBarVisibility="Disabled">
<WrapPanel>
<Image Source="RentgenogramOfWrist.jpg" Width="500"></Image>
<Button Width="300" Height="300"/>
</WrapPanel>
</ScrollViewer>
</TabItem.Content>
</TabItem>
</TabControl.Items>
</TabControl>
</Grid>
The problem is that when program is running and I switch to second tabItem scrollViewer will be scrolled to start of button. When I now switch from second tabItem to first one the same happenes.
The Button's Focusable property is true by default, so the ScrollViewer scrolls to focus the button.
Set
<Button Width="300" Height="300" Focusable="False"/>
for one of them and see what changes.
Related
Question: Can we change the height of the title bar displayed in MahApps.Metro?
Details: For instance, in the following XAML example from the MahApps team, I want to display the content Deploy CupCake - of the TextBlock - below the image of the CupCake. So I removed the Orientation="Horizontal" from the StackPanel in the following XAML. As shown in the snapshot below, the content Deploy CupCake is now showing below the image of CupCake - but it is hiding almost all of it. How can we make this content show all of it below the CupCake image?
Snapshot of the Toolbar with MahApps.Metro: Only about 10% of the content is showing below the image.
<mah:MetroWindow x:Class="SampleApp.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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="800"
Height="450"
GlowBrush="{DynamicResource MahApps.Brushes.Accent}"
ResizeMode="CanResizeWithGrip"
WindowStartupLocation="CenterScreen"
mc:Ignorable="d">
<mah:MetroWindow.LeftWindowCommands>
<mah:WindowCommands>
<Button Click="LaunchGitHubSite" ToolTip="Open up the GitHub site">
<iconPacks:PackIconModern Width="22"
Height="22"
Kind="SocialGithubOctocat" />
</Button>
</mah:WindowCommands>
</mah:MetroWindow.LeftWindowCommands>
<mah:MetroWindow.RightWindowCommands>
<mah:WindowCommands>
<Button Click="DeployCupCakes" Content="Deploy CupCakes">
<Button.ContentTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<iconPacks:PackIconModern Width="22"
Height="22"
VerticalAlignment="Center"
Kind="FoodCupcake" />
<TextBlock Margin="4 0 0 0"
VerticalAlignment="Center"
Text="{Binding}" />
</StackPanel>
</DataTemplate>
</Button.ContentTemplate>
</Button>
</mah:WindowCommands>
</mah:MetroWindow.RightWindowCommands>
<Grid>
<!-- Your content -->
</Grid>
</mah:MetroWindow>
First of all, it is better to use a to use a panel that distributes the available space among its content, like a Grid, to prevent cutting off content as with the StackPanel. Here, the data template defines a Grid with two rows, where the TextBlock scales to its desired size and the icon takes up the remaining available space. Also note the HorizontalAlignment of the icon, it is centered.
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<iconPacks:PackIconModern Grid.Row="0"
Width="22"
Height="22"
HorizontalAlignment="Center"
Kind="FoodCupcake" />
<TextBlock Grid.Row="1"
Margin="4 0 0 0"
VerticalAlignment="Center"
Text="{Binding}" />
</Grid>
</DataTemplate>
The same result could also be achieved using a DockPanel, where the last child (in this case the icon) takes up the remaining available space, so the order of the defined controls is important.
<DataTemplate>
<DockPanel>
<TextBlock DockPanel.Dock="Bottom"
Margin="4 0 0 0"
VerticalAlignment="Center"
Text="{Binding}" />
<iconPacks:PackIconModern DockPanel.Dock="Top"
Width="22"
Height="22"
HorizontalAlignment="Center"
Kind="FoodCupcake" />
</DockPanel>
</DataTemplate>
In both cases you will get the result below, a button with a centered icon and a text below.
To make the button more prominent, change the title bar height with the TitleBarHeight property.
<mah:MetroWindow x:Class="SampleApp.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:iconPacks="http://metro.mahapps.com/winfx/xaml/iconpacks"
xmlns:mah="clr-namespace:MahApps.Metro.Controls;assembly=MahApps.Metro"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
Title="MainWindow"
Width="800"
Height="450"
GlowBrush="{DynamicResource MahApps.Brushes.Accent}"
ResizeMode="CanResizeWithGrip"
WindowStartupLocation="CenterScreen"
mc:Ignorable="d"
TitleBarHeight="50">
I have a main windows with a button that open another window that has a user control and this user control has a datagrid. The code is this:
Main windows: code of the button:
dlgImprimirControlUsuarioView miView = new dlgImprimirControlUsuarioView();
miView.Show();
The code in my second window (codebehind):
public partial class dlgImprimirControlUsuarioView : Window
{
public dlgImprimirControlUsuarioView()
{
InitializeComponent();
UserControlView miView = new UserControlView();
this.ccControlUsuario = miView;
}
}
AXML of the second windows:
<Window x:Class="WpfObtenerTamañoControles.dlgImprimirControlUsuarioView"
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:WpfObtenerTamañoControles"
mc:Ignorable="d"
Title="dlgImprimirControlUsuario" Height="200" Width="300">
<Grid>
<ScrollViewer Name="svControlUsuario" HorizontalAlignment="Left" Height="200" Width="300" Margin="0,0,0,0" VerticalAlignment="Top" >
<ContentControl Name="ccControlUsuario" HorizontalAlignment="Left" Margin="0,0,0,0" VerticalAlignment="Top"/>
</ScrollViewer>
</Grid>
</Window>
The AXML of the user control that is used by the second windows:
<UserControl x:Class="WpfObtenerTamañoControles.UserControlView"
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:WpfObtenerTamañoControles"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800">
<Grid>
<TextBox HorizontalAlignment="Left" Height="23" Margin="0,0,0,0" TextWrapping="Wrap" Text="TextBox" VerticalAlignment="Top" Width="120"/>
<ScrollViewer Name="svDatagrid" HorizontalAlignment="Left" Height="32" Margin="0,0,0,0" VerticalAlignment="Top" Width="300">
<DataGrid Name="dgDatagrid" HorizontalAlignment="Left" Height="120" Margin="0,0,0,0" VerticalAlignment="Top" Width="Auto">
<DataGrid.Columns>
<DataGridTextColumn Header="Contador" Binding="{Binding}" Width="2.5cm"/>
</DataGrid.Columns>
</DataGrid>
</ScrollViewer>
</Grid>
</UserControl>
I can see the vertical scroll bar of the scroll viewer of the second window, but I can't see the content of this scroll viewer. But I am not able to see the problem.
Thanks.
XAML:
<WrapPanel>
<TextBox ScrollViewer.VerticalScrollBarVisibility="Auto" AcceptsReturn="True"/>
<TextBox ScrollViewer.VerticalScrollBarVisibility="Auto" AcceptsReturn="True"/>
</WrapPanel>
As you can see at the following picture, the second TextBox is cut after it wrapped, to second line.
Picture:
Put the WrapPanel in a ScrollViewer if you want to be able to scroll its content:
<Window x:Class="WpfApplication1.Window1"
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"
Title="Window1" Height="300" Width="300">
<ScrollViewer>
<WrapPanel>
<TextBox Width="400"></TextBox>
<TextBox Height="500" ScrollViewer.VerticalScrollBarVisibility="Visible"></TextBox>
</WrapPanel>
</ScrollViewer>
</Window>
The WrapPanel won't automatically adopt to the size of the window.
Cant make button in WPF app with image and text on it. My code is like this:
<Window x:Class="WindowR.One"
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:WindowR"
mc:Ignorable="d"
Title="One" Height="300" Width="300">
<Grid>
<StackPanel Orientation="Vertical">
<TextBlock Text="Click Here" />
<Image Source="D:\Skola\4. semester\TP\GIT folder\Visualko\Core\WindowR\Pictures\0.png" />
</StackPanel>
</Grid>
</Window>
But the text isnt above image..tried lots of tutorials from here..but none of them work properly
StackPanel arranges TextBlock next to Image. Try to use Grid
<Button Width="120" Height="50" >
<Grid>
<Image Source="D:\Skola\4. semester\TP\GIT folder\Visualko\Core\WindowR\Pictures\0.png" />
<TextBlock Text="Click Here"
VerticalAlignment="Center"
HorizontalAlignment="Center" />
</Grid>
</Button>
I have the following WPF application
<Window x:Class="Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Title="Window1" Height="300" Width="300">
<Grid>
<TabControl>
<TabItem Header="Test1">
<local:ImageView />
</TabItem>
<TabItem Header="Test2">
<local:ImageView />
</TabItem>
<TabItem Header="Test3">
<local:ImageView />
</TabItem>
</TabControl>
</Grid>
</Window>
ImageView is a UserControl defined as
<UserControl x:Class="ImageView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid>
<Image Source="pack://application:,,,/Resources/icon.png" Width="15" Height="15" />
</Grid>
</UserControl>
When I switch between TabItems, sometimes the image displays, sometimes it doesn't. Why does this happen?
For the record, I was able to get around this problem by changing my ImageView to
<UserControl x:Class="ImageView"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Grid>
<Grid.Resources>
<BitmapImage x:Key="IconImageSource" UriSource="pack://application:,,,/Resources/icon.png" />
</Grid.Resources>
<Image Source="{StaticResource IconImageSource}" Width="15" Height="15" />
</Grid>
But I'm still curious why the first approach doesn't work