I have a WPF window with rounded corners
<Window x:Name="windowPortal" x:Class="ICS2GO.PortalWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Portal" Height="301" Width="489" Icon="/Resources/icon.ico"
WindowStyle="None" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" Closing="Window_Closing" Background="Transparent" AllowsTransparency="True">
<Border Name="windowBorder" BorderThickness="2" BorderBrush="DarkBlue"
CornerRadius="20" Background="LightBlue" Margin="0,0,0,0">
<Grid VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
//main controls, buttons, images ...etc here
<Grid x:Name="gdWait" >
<Grid Background="Black" Opacity="0.5"/>
<Label x:Name="lblStatus" Content="Please Wait"
HorizontalAlignment="Center" HorizontalContentAlignment="Center"
VerticalContentAlignment="Center" VerticalAlignment="Center"
FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62"
Height="72" Width="410"/>
<ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30"
Margin="110,108,0,0" VerticalAlignment="Top" Width="243"
IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Grid>
Grid x:Name="gbWait" is displayed over all main controls with a black background and opacity set as to allow some visablility of the main controls but alway renders them unclickable by the user
I would like to make Grid gbWait's corners rounded as well so it matches with the Window's rounded corners. Currently they are square and extend passed the window corner where it is normal square.
Use the Clip property of the Border as follows to achieve your requirement.
<Border Name="windowBorder" BorderThickness="2" BorderBrush="DarkBlue"
CornerRadius="20" Background="LightBlue" Margin="0,0,0,0">
<Border.Clip>
<RectangleGeometry RadiusX="20" RadiusY="20" Rect="0,0,489,301" >
</RectangleGeometry>
</Border.Clip>
<Grid></Grid>
</Border>
This solution assumes your windows size is 489 x 301 and it is not resizable. If you need solution for resizable window then use converter to calculate the Rect values of RectangleGeometry.
I think this might be a good candidate for a converter.
Place this piece of code in your code-behind, or a separate file if you want:
public class VisibilityToBrushConverter : IValueConverter
{
public object Convert(object value, Type targetType,
object parameter, CultureInfo culture)
{
var visible = (Visibility)value;
return visible == Visibility.Visible
? new SolidColorBrush(System.Windows.Media.Color.FromRgb(70, 130, 180))
: new SolidColorBrush(System.Windows.Media.Color.FromRgb(173, 216, 230));
}
public object ConvertBack(object value, Type targetType,
object parameter, CultureInfo culture)
{
throw new NotImplementedException();
}
}
Then reference it in your XAML (remove <Grid Background="Black" Opacity="0.5"/>):
<Window.Resources>
<l:VisibilityToBrushConverter x:Key="converter" />
</Window.Resources>
<Grid>
<Border Name="windowBorder" BorderThickness="2" BorderBrush="SteelBlue" CornerRadius="20"
Background="{Binding ElementName=gdWait, Path=Visibility, Converter={StaticResource converter}}" Margin="0,0,0,0">
<Grid x:Name="gdWait" Visibility="Visible">
<Label x:Name="lblStatus" Content="Please Wait" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62" Height="72" Width="410"/>
<ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30" Margin="110,108,0,0" VerticalAlignment="Top" Width="243" IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Border>
</Grid>
I suggest that you make a rounded border with paddings, and with same background as your Grid
<Border CornerRadius="10" Padding="10" Background=Black>
<Grid x:Name="gdWait" Visibility="Collapsed">
<Grid Background="Black" Opacity="0.5"/>
<Label x:Name="lblStatus" Content="Please Wait" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,51,28,62" Height="72" Width="410"/>
<ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30" Margin="110,108,0,0" VerticalAlignment="Top" Width="243" IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Border>
Try this
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:hp="clr-namespace:WpfApplication2"
Title="Portal" Height="301" Width="489" Template="{DynamicResource WindowTemplate}" WindowStyle="None" WindowStartupLocation="CenterScreen" ResizeMode="NoResize" Background="Transparent" AllowsTransparency="True">
<Window.Resources>
<ControlTemplate x:Key="WindowTemplate">
<Border BorderBrush="DarkBlue" Background="LightBlue" BorderThickness="2" Margin="5" CornerRadius="20">
<Border BorderBrush="DarkBlue" Background="#576C73" Margin="5" BorderThickness="2" CornerRadius="20">
<Grid VerticalAlignment="Stretch" Background="#576C73" HorizontalAlignment="Stretch" Margin="5">
<Grid x:Name="gdWait" Margin="5" Background="#576C73" >
<Grid Background="#576C73"/>
<Label x:Name="lblStatus" Content="Please Wait" HorizontalAlignment="Center" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" VerticalAlignment="Center" FontWeight="Bold" Foreground="Red" FontSize="24" Margin="28,0,28,62" Height="72" Width="410"/>
<ProgressBar x:Name="pbWaiting" HorizontalAlignment="Left" Height="30" Margin="110,108,0,0" VerticalAlignment="Top" Width="243" IsIndeterminate="True" Orientation="Horizontal"/>
</Grid>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Window.Resources>
i have changed the window template ..and it is working on different size of window.. sorry if i am wrong to your requirement.
Related
I want to make searchbox like when I search Items then listbox is show in this page. I have make listbox page is in another wpf window. Can you please help on this I am facing maki problem regarding this.
When I search listbox Items from MainWindow.Xaml and click button then of item show in main page. and Items on See software page.
Thankyou!
MainWindow.xaml
<Window Title="Welcome" Background="#FFD6D6D6" WindowStyle="None" ResizeMode="NoResize"
WindowStartupLocation="CenterScreen" MouseDown="Window_MouseDown"
AllowsTransparency="True" Height="600" Width="1050">
<!--Make serchbar -->
<Grid Background="#2892b5" Grid.Column="3" Margin="10,0,0,0" >
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition />
</Grid.RowDefinitions>
<Viewbox HorizontalAlignment="Left" Margin="22,4,0,0" VerticalAlignment="Center" Width="65">
<Image Source="/Resources/search_32px.png" Height="40" Width="70" />
</Viewbox>
<Viewbox HorizontalAlignment="Center" Margin="70,4,0,0" VerticalAlignment="Center" >
<Label Content="Search for software" FontWeight="Bold" FontSize="20" Foreground="White" Grid.Row="0" Width="286"/>
</Viewbox>
<TextBox Background="White" Foreground="Black" x:Name="search" FontSize="20" Grid.Row="1" TextChanged="TextBox_TextChanged" Margin="37,0,36,38"/>
<Button Grid.Row="1" Height="37" Width="37" Background="Transparent" BorderBrush="Transparent" VerticalAlignment="Top" HorizontalAlignment="Right">
<Image Source="/View/icons8_right_50px_1.png"/>
</Button>
</Grid>
MainWindow.xaml.cs
private void SearchClick_Click(object sender, RoutedEventArgs e)
{
}
SeeSoftware.xaml
<Window Title="SeeSoftware" Height="700" Width="800" WindowStyle="None" MouseDown="Window_MouseDown">
<ListBox x:Name="Listbox" Foreground="White" FontSize="15" BorderBrush="Transparent" Background="Transparent">
<ListBoxItem Height="50">
<StackPanel Orientation="Horizontal" Margin="20,0,0,0" HorizontalAlignment="Left">
<Image Height="30" Width="30" Source="/Resources/vscode.jpeg"/>
<Label VerticalAlignment="Center" Foreground="White" FontSize="18" Margin="20,0,0,0" Content="Visual Studio code" />
<TextBlock Margin="18,0,0,0" FontSize="18" VerticalAlignment="Center" >
<Hyperlink Foreground="White" NavigateUri="https://az764295.vo.msecnd.net/stable/6261075646f055b99068d3688932416f2346dd3b/VSCodeUserSetup-x64-1.73.1.exe" RequestNavigate="Hyperlink_RequestNavigate">
Install
<Image Height="13" Source="/Resources/icons8_download_26px.png"/>
</Hyperlink>
</TextBlock>
</StackPanel>
</ListBoxItem>
</ListBox>
I have custom title bar for all windows of my application.
I want to create a template that I can use many times on different windows or on Message Box
I am thinking what is the best practice to achieve this.
At the moment I have a title bar but it is hard coded in every window.
This is an example of one of the windows
<Window x:Class="MyApp.Configuration.Windows.NotMainWindow"
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"
Title="Some text"
Height="113.868" Width="405.84"
Background="#FFE5E5E5"
WindowStyle="None"
>
<WindowChrome.WindowChrome>
<WindowChrome CaptionHeight="34" />
</WindowChrome.WindowChrome>
<Window.Resources>
<ResourceDictionary Source="pack://application:,,,/somefolder.somefolder;component/Resources/TitleBarIconsStyle.xaml" />
</Window.Resources>
<Border x:Name="MainWindowBorder" BorderThickness="0" >
<Grid x:Name="parentContainer">
<Grid.RowDefinitions>
<RowDefinition Height ="Auto"/>
<RowDefinition Height ="*"/>
</Grid.RowDefinitions>
<!--Window chrome-->
<Grid Grid.Row="0" Height="30" Background="#585856">
<StackPanel Orientation="Horizontal" HorizontalAlignment="Left" VerticalAlignment="Center">
<!--App icon-->
<Image Source="/Resources/icon.png" Width="18" Margin="2" HorizontalAlignment="Left" VerticalAlignment="Center" />
<TextBlock FontFamily="Arial" Margin="4 3 0 0" Text="Some text"/>
</StackPanel>
<!--Caption buttons-->
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" >
<Button Style="{StaticResource MinimizeButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Minimize"
Click="CommandBinding_Executed_Minimize"/>
<Button x:Name="RestoreButton" Visibility="Collapsed" Style="{StaticResource RestoreButtonStyle}"
Click="CommandBinding_Executed_Restore" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Restore"/>
<Button x:Name="MaximizeButton" Visibility="Visible" Style="{StaticResource MaximizeButtonStyle}"
Click="CommandBinding_Executed_Maximize" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Maximize" />
<Button x:Name="CloseButton" Style="{StaticResource CloseButtonStyle}" WindowChrome.IsHitTestVisibleInChrome="True" ToolTip="Close"
Click="CommandBinding_Executed_Close"/>
</StackPanel>
</Grid>
<Grid Grid.Row="1">
<TextBox x:Name="Input"/>
<Button x:Name="OkButton"
Content="Ok"/>
</Grid>
</Grid>
</Border>
</Window>
Based on this MSDN document , you can not customize (like change colors and add your icons) windows title bar in WPF App.
the solution is create your custom title bar style and set WindowStyle="None" in <Window/> tag.
There one custom title bar in my WPF app :
<Grid FlowDirection="RightToLeft">
<Grid.RowDefinitions>
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<StackPanel Margin="0 0 5 0" Orientation="Horizontal" Background="{DynamicResource {x:Static SystemColors.HighlightTextBrushKey}}" Grid.Row="0" Grid.Column="6" Grid.ColumnSpan="2" FlowDirection="LeftToRight">
<Button x:Name="btnCloseApp" IsEnabled="True" Margin="0 0 4 0" ToolTip="Exit" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnCloseApp_Click">
<materialDesign:PackIcon Kind="Shutdown" Height="20" Width="20"/>
</Button>
<Button x:Name="btnMinimizeApp" IsEnabled="True" ToolTip="Minimize" Style="{StaticResource MaterialDesignFloatingActionMiniAccentButton}" Height="25" Width="25" Background="{x:Null}" BorderBrush="{x:Null}" Foreground="DodgerBlue" Click="btnMiniApp_Click">
<materialDesign:PackIcon Kind="WindowMinimize" Height="20" Width="20"/>
</Button>
</StackPanel>
</Grid>
and in picture :
Again don't forget to set WindowStyle="None"
I would like to change stack panel content/data on button click in the same window.
I have a menu list on left and on the right of the window I have 2 stackpanel which I want to update. This is actually my configuration screen. Following is my XAML code:
<Window x:Class="Manager.Screens.Configurations"
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:Manager.Screens"
mc:Ignorable="d"
Title="Configurations" Height="850" Width="1000" WindowStyle="None" >
<Border
BorderBrush="Black"
BorderThickness="0"
Padding="0">
<Grid Background="White" ShowGridLines="True" Margin="-3,0,0,0">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="200*"/>
<ColumnDefinition Width="263*"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<StackPanel Grid.Column="0" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel1" VerticalAlignment="Top" Height="Auto" Width="Auto">
<Image Source="Resources\Images\config_back.jpg" Stretch="Fill" Opacity="0.65" Height="Auto" Margin="-3,-2,0,0"/>
<Button Margin="0,-1450,0,60" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\tools.png" Margin="75,0,25,0"/>
<TextBlock Text="General" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-1350,0,10" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\setting.png" Margin="75,0,25,0"/>
<TextBlock Text="Settings" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-1250,0,-40" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="Limits/Stations" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-1150,0,-90" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="Portions" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-1050,0,-140" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="Label Templates" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-950,0,-190" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="RFID Containers" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
<Button Margin="0,-850,0,-240" Height="38" Background="Transparent">
<StackPanel Orientation="Horizontal" Width="332">
<Image Source="Resources\Images\user.png" Margin="75,0,25,0"/>
<TextBlock Text="User Management" VerticalAlignment="Center" FontSize="18" FontWeight="Bold" Foreground="#FFFF8C3D"/>
</StackPanel>
</Button>
</StackPanel>
<StackPanel Grid.Column="1" Grid.Row="0" HorizontalAlignment="Stretch" Name="StackPanel2" VerticalAlignment="Top" Orientation="Vertical">
</StackPanel>
<StackPanel Grid.Column="2" Grid.Row="0" HorizontalAlignment="Left" Name="StackPanel3" VerticalAlignment="Top">
<TextBlock FontSize="18" HorizontalAlignment="Center" Margin="0,0,0,15">StackPanel3</TextBlock>
<Button Margin="10">Button 7</Button>
<Button Margin="10">Button 8</Button>
<Button Margin="10">Button 9</Button>
<TextBlock>ColumnDefinition.Width="Auto"</TextBlock>
<TextBlock>StackPanel.HorizontalAlignment="Left"</TextBlock>
<TextBlock>StackPanel.VerticalAlignment="Top"</TextBlock>
<TextBlock>StackPanel.Orientation="Vertical"</TextBlock>
<TextBlock>Button.Margin="10"</TextBlock>
</StackPanel>
</Grid>
</Border>
</Window>
I haven't written any controls or functions so far please help me as I am new how can it be done in WPF.
Basically there are three main approaches to show / hide controls on your view. Here's the code that provides you with an example of each:
XAML:
<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"
mc:Ignorable="d"
Title="MainWindow" Height="450" Width="800">
<Window.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter"/>
</Window.Resources>
<Grid>
<Grid.RowDefinitions>
<RowDefinition />
<RowDefinition />
<RowDefinition />
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<Rectangle Grid.Column="0" Grid.Row="0" Visibility="{Binding IsBlueRectangleVisible, Converter={StaticResource BooleanToVisibilityConverter}}" Fill="Blue" />
<Button Grid.Column="1" Grid.Row="0" Content="Binding to ViewModel" Command="{Binding BlueRectangleSwitchCommand}"/>
<Rectangle Grid.Column="0" Grid.Row="1" Visibility="{Binding ElementName=toggleBtn, Path=IsChecked, Converter={StaticResource BooleanToVisibilityConverter}}" Fill="Red" />
<ToggleButton Grid.Column="1" Grid.Row="1" x:Name="toggleBtn" Content="Toggle switch" />
<Rectangle x:Name="greenRectangle" Grid.Column="0" Grid.Row="2" Fill="Green" />
<Button Grid.Column="1" Grid.Row="2" Content="Code behind" Click="GreenRectangleBtnClick"/>
</Grid>
</Window>
Code behind:
public partial class MainWindow : Window, INotifyPropertyChanged
{
public MainWindow()
{
InitializeComponent();
// Blue rectangle
// Initialize the command that is binded to one of your buttons
BlueRectangleSwitchCommand = new RelayCommand(o =>
{
// Switches the flag binded to Visibility property of one of your Rectangles
IsBlueRectangleVisible = !IsBlueRectangleVisible;
// Notify that UI shoud be re-rendered
OnPropertyChanged(nameof(IsBlueRectangleVisible));
});
// Next line is needed in order to bind this object to the DataContext of itself (wierd, isn't it?)
// So the MainWindow would know where to llok up for the properties you are binding to in XAML
DataContext = this;
}
// Blue rectangle
// Property that is binded to Visibility property of one of your Rectangles
public bool IsBlueRectangleVisible { get; set; }
// Blue rectangle
// Property that is binded to Command property of one of your Rectangles
public ICommand BlueRectangleSwitchCommand { get; private set; }
// Blue rectangle
// This implementation of INotifyPropertyChanged interface allows you to use OnPropertyChanged
// that is needed for notifying UI that your properties changed
#region INotifyPropertyChanged
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged(string propertyName)
=> PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
#endregion
// Green rectangle
private void GreenRectangleBtnClick(object sender, RoutedEventArgs e)
{
greenRectangle.Visibility = greenRectangle.Visibility == Visibility.Visible
? Visibility.Collapsed
: Visibility.Visible;
}
}
I added commentaries so you could easily distinguish between each of them. As it's up to you to decide which one suits you more.
But here's what I suggest:
If you don't need to track the actual state, use the Toggle switch (Red);
If you need to track the state of the switch or to switch if from your code behind - use Binding to ViewModel (Blue);
Never use the third one. Okay, this is a joke, sort of. If you need a really simple UI in a small application - use it all you want. But if there's a possibility that your app is going to grow so you'll need a separation of concerns, test-ability, etc, don't even look to this approach. It'll make your application a noodle pan (Green).
I am trying to make an image stretch to fit the screen with preserverd aspect ratio. I thought this code would do the trick:
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenHeight}" Stretch="Uniform" StretchDirection="Both"/>
Regretably it seems like the image just fits to the width of the screen and crops it at the bottom.
The complete xaml code looks like this:
enter co<Window x:Class="ImageExplorer.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:ImageExplorer"
mc:Ignorable="d"
Title="MainWindow" WindowState="Maximized" Background="Black">
<StackPanel>
<Border BorderBrush="Black" BorderThickness="2">
<Grid Margin="0,0,0,0">
<Button Content="open" Click="OpenImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="1,1,1,1" />
<Button Content="Prev." Click="GetPreviousImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="120,1,1,1"/>
<Button Content="Next" Click="GetNextImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="180,1,1,1" />
<Label Content="Fil:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="120" Height="30" Margin="1,1,300,1"/>
<TextBlock Name="StiViser" HorizontalAlignment="Right" VerticalAlignment="Center" Width="298" Margin="1,1,1,1" TextWrapping="Wrap" Text="TextBlock"/>
</Grid>
</Border>
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" Stretch="Uniform" StretchDirection="Both"/>
</StackPanel>
Use DockPanel instead
<DockPanel LastChildFill="True">
<Border DockPanel.Dock="Top" BorderBrush="Black" BorderThickness="2">
<Grid Margin="0,0,0,0">
<Button Content="open" Click="OpenImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="1,1,1,1" />
<Button Content="Prev." Click="GetPreviousImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="120,1,1,1"/>
<Button Content="Next" Click="GetNextImage" HorizontalAlignment="Left" VerticalAlignment="Center" Width="58" Height="30" Margin="180,1,1,1" />
<Label Content="Fil:" HorizontalAlignment="Right" VerticalAlignment="Center" Width="120" Height="30" Margin="1,1,300,1"/>
<TextBlock Name="StiViser" HorizontalAlignment="Right" VerticalAlignment="Center" Width="298" Margin="1,1,1,1" TextWrapping="Wrap" Text="TextBlock"/>
</Grid>
</Border>
<Image Name="Viewer" Height="{Binding SystemParameters.PrimaryScreenHeight}" Width="{Binding SystemParameters.PrimaryScreenWidth}" Stretch="Fill" StretchDirection="Both"/>
</DockPanel>
I build an image gallery in WPF, main window is simply a grid of images, i want to draw a zoom icon overlay at corner of image, and when user click on this icon, this icon will capture click event instead of image. I'm quite new to WPF, so please show me a good approach for this.
Here is xaml file
<Window x:Class="MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Image Gallery" Height="350" Width="525" WindowState="Maximized">
<Window.Resources>
<ItemsPanelTemplate x:Key="ImageGalleryItemsPanelTemplate">
<UniformGrid Columns="4" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"></UniformGrid>
</ItemsPanelTemplate>
<DataTemplate x:Key="ListImageDataTemplate">
<Grid HorizontalAlignment="Left" Width="230" Height="230">
<Border Padding="5" Margin="10" BorderBrush="Orange">
<!--Bind Image Path in Image Control-->
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center">
<!--View Large Image on Image Control Tooltip-->
<Image.ToolTip>
<StackPanel Background="Black">
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" Height="200" Width="200"></Image>
<TextBlock Text="{Binding ImageName}" Foreground="White" Background="Black" Height="20" FontWeight="SemiBold" Margin="15,0,15,0"></TextBlock>
</StackPanel>
</Image.ToolTip>
</Image>
</Border>
</Grid>
</DataTemplate>
</Window.Resources>
<Grid>
<ListBox x:Name="lbImageGallery" Grid.Row="0" Grid.Column="0" ItemsSource="{Binding}" ItemsPanel="{DynamicResource ImageGalleryItemsPanelTemplate}" ItemTemplate="{StaticResource ListImageDataTemplate}">
<ListBox.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black"/>
<GradientStop Color="#FF1E2A2F" Offset="1"/>
</LinearGradientBrush>
</ListBox.Background>
</ListBox>
</Grid>
</Window>
OK, download an icon, and add it to your project (Images\overlay.jpg). The DataTemplate now looks like this
<DataTemplate x:Key="ListImageDataTemplate">
<Grid HorizontalAlignment="Left" Width="230" Height="230">
<Border Padding="5" Margin="10" BorderBrush="Orange">
<Grid>
<!--Bind Image Path in Image Control-->
<Image Source="{Binding ImagePath}" Stretch="Fill" HorizontalAlignment="Center" />
<!--Show the overlay at the Bottom Right corner-->
<StackPanel Background="Black" HorizontalAlignment="Right" VerticalAlignment="Bottom">
<Image Source="Images/overlay.jpg" Stretch="Fill" Height="40" Width="40"></Image>
<!--<TextBlock Text="{Binding ImageName}" Foreground="White" Background="Black" Height="20" FontWeight="SemiBold" />-->
</StackPanel>
</Grid>
</Border>
</Grid>
</DataTemplate>