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>
Related
I want to create a button having image and label as content in the bottom and notification image on the Upper right corner as in the WhatsApp whenever there is notification.
I can work with Notification logic but can't able to display the image properly as shown in the figure.
I tried with canvas and grid but not able to do that.Any help will be appreciated.I also tried using dock panel and stack panel but was unable to achieve the same.
<Button Name="JobViewer" Tag="JobsIcon" Style="{DynamicResource ButtonAppStyle}" Margin="5" Click="UpdateAction" ToolTip="{Binding RelativeSource={RelativeSource Self }, Path=Name}" >
<Button.Content>
<DockPanel>
<Image DockPanel.ZIndex="2" Source="{StaticResource ContainerZoomWarningLightIcon}" DockPanel.Dock="Top" MaxHeight="40" MaxWidth="40" HorizontalAlignment="Right" ></Image>
<Label Content="JobViewer" DockPanel.Dock="Bottom"></Label>
<Image DockPanel.ZIndex="1" Source="{StaticResource JobsIcon}" ></Image>
</DockPanel>
</Button.Content>
</Button>
the image i get
the image i want
You could specify the <Button> content to give yourself the layout you want.
<Button Width="70" Height="70" Background="Transparent">
<Button.Content>
<Canvas Background="Black">
<Border CornerRadius="8" Height="50" Width="50" Canvas.Left="-25" Canvas.Top="-25"
BorderThickness="0" BorderBrush="Black" Background="#FF47B137">
<Border.Effect>
<DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
</Border.Effect>
</Border>
<Border CornerRadius="20" Width="20" Height="20" Canvas.Left="10" Canvas.Top="-30"
BorderBrush="White" BorderThickness="2" Background="#FFE40814">
<Border.Effect>
<DropShadowEffect BlurRadius="3" Opacity=".6" ShadowDepth="2" />
</Border.Effect>
</Border>
</Canvas>
</Button.Content>
</Button>
I am wondering is it possible to change the close button on a floating window in wpf? I currently have it like a windows close with white cross and red background. I also have an image of a black cross and wondering is it possible to take off teh red background and white cross and replace it with my image?
<syncfusion:DockingManager x:Name="DockingManager"
PersistState="True"
UseDocumentContainer="True"
Margin="0,0,0,0"
syncfusion:SkinManager.ActiveColorScheme="#E7E7E7"
HeaderForeground="Black"
SelectedHeaderBackground="{DynamicResource selectedHeaderBackground}"
syncfusion:DockingManager.DesiredHeightInFloatingMode="27"
syncfusion:DockingManager.DesiredHeightInDockedMode="27"
FloatWindowMouseOverHeaderBackground="#F6CD1D"
FloatWindowHeaderBackground="#F6CD1D"
HeaderForegroundSelected="Black"
TabItemBackgroundSelected="{DynamicResource headerBackground}"
TabPanelBackground="#FFE7E7E7"
SidePanelBackground="White"
TabItemsForeground="{DynamicResource {x:Static SystemColors.ActiveCaptionTextBrushKey}}"
Background="White"
FloatWindowHeaderForeground="{DynamicResource headerBackground}"
TabItemsBackground="{DynamicResource headerBackground}"
FloatWindowSelectedHeaderForeground="{DynamicResource headerBackground}"
FloatWindowMouseOverHeaderForeground="{DynamicResource headerBackground}"
HeaderBorderBrush="{x:Null}"
OpacityMask="{DynamicResource headerBackground}"
TabItemsBorderBrush="{DynamicResource headerBackground}"
FloatWindowSelectedHeaderBackground="{DynamicResource headerBackground}"
HeaderBackground="{DynamicResource headerBackground}"
TabItemForegroundSelected="#FF4A515A">
<syncfusion:DockingManager.SideItemsBorderBrush>
<LinearGradientBrush EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFEFEEEE" Offset="0"/>
<GradientStop Color="#E7000000"/>
</LinearGradientBrush>
</syncfusion:DockingManager.SideItemsBorderBrush>
<dockWindow:LocationMap x:Name="Locationmap"
syncfusion:DockingManager.DesiredHeightInDockedMode="100"
Background="White"
syncfusion:DockingManager.SideInDockedMode="Left"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.DesiredWidthInDockedMode="300" FontWeight="Bold" FontSize="10.667">
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left"/>
<Image Source="Images/Earth.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="Location Map" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
<dockWindow:LocationMap.Foreground>
<ImageBrush />
</dockWindow:LocationMap.Foreground>
</dockWindow:LocationMap>
<dockWindow:Tornado x:Name="TornadoDiagram"
syncfusion:DockingManager.SideInDockedMode="Right"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.DesiredWidthInDockedMode="400"
syncfusion:DockingManager.DesiredHeightInDockedMode="200" FontWeight="Bold">
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left"/>
<Image Source="Images/Tornado1.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left"/>
<TextBlock Text="Tornado Diagram" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="2"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
</dockWindow:Tornado>
<dockWindow:Cdf x:Name="CdfDiagram"
syncfusion:DockingManager.SideInDockedMode="Bottom"
syncfusion:DockingManager.State="Dock"
syncfusion:DockingManager.TargetNameInDockedMode="TornadoDiagram"
syncfusion:DockingManager.DesiredWidthInDockedMode="400"
syncfusion:DockingManager.DesiredHeightInDockedMode="200" FontWeight="Bold" >
<syncfusion:DockingManager.HeaderTemplate>
<DataTemplate>
<DockPanel>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Left" Margin="1"/>
<Image Source="Images/CDF1.png" Height="15" Width="15" VerticalAlignment="Center" HorizontalAlignment="Left" Margin="1"/>
<TextBlock Text="CDF" HorizontalAlignment="Left" VerticalAlignment="Center" Margin="2"/>
<Image Source="Images/dragger.png" Height="20" Width="5" HorizontalAlignment="Right" Margin="1"/>
</DockPanel>
</DataTemplate>
</syncfusion:DockingManager.HeaderTemplate>
</dockWindow:Cdf>
So the best way to do this is to create custom windows yourself and then this allows you to create the window exactly how you want it. It's bit longer than a simple change of one thing in the XAML but it works
I have an application that I am writing and its for the most part still in mockup so there is not much c# behind it.
I'm noticing a strange 1px border or separator between two sections of my window that according to the XAML should not be there, nor is it there at design time, but at run sure enough I can't get rid of it. (annotated by red arrow)
Main windows XAML:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:DS4Windows" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:Custom="http://schemas.microsoft.com/winfx/2006/xaml/presentation/ribbon" xmlns:Forms="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms" xmlns:tb="http://www.hardcodet.net/taskbar" xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" mc:Ignorable="d" x:Class="DS4Windows.MainWindow"
Title="DS4Windows DSDCS Build" Height="519" Width="965" WindowStyle="None" ResizeMode="NoResize" MinWidth="800" MinHeight="519">
<Window.Background>
<ImageBrush ImageSource="Backgrounds/BlueBG2.jpg" Stretch="UniformToFill"/>
</Window.Background>
<Window.Effect>
<DropShadowEffect/>
</Window.Effect>
<DockPanel Margin="0">
<DockPanel.Background>
<ImageBrush/>
</DockPanel.Background>
<DockPanel x:Name="TopPanel" Height="92" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Top" MouseDown="WindowDrag">
<DockPanel.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#7F000000" Offset="0"/>
<GradientStop Offset="1" Color="#00000000"/>
</LinearGradientBrush>
</DockPanel.Background>
<Image x:Name="ProgramIcon" Height="100" VerticalAlignment="Top" Width="100" Source="Icons/Icon.png" StretchDirection="DownOnly"/>
<Menu x:Name="MainMenu" VerticalAlignment="Top" DockPanel.Dock="Bottom" Opacity="0.9" FontSize="14">
<MenuItem x:Name="FileMenu" Header="File">
<MenuItem Header="Quit"/>
</MenuItem>
<MenuItem x:Name="ToolsMenu" Header="Tools"/>
<MenuItem x:Name="HelpMenu" Header="Help"/>
<MenuItem x:Name="AccountMenu" Header="My Account" SubmenuClosed="AccountMenu_SubmenuClosed">
<MenuItem x:Name="UsernameMenuItem" Template="{DynamicResource NoHoverMenu}">
<MenuItem.Header>
<StackPanel Orientation="Horizontal">
<Label Content="Username" Width="76" Padding="0"/>
<TextBox x:Name="UsernameInput" Width="134"/>
</StackPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem x:Name="PasswordMenuItem" Template="{DynamicResource NoHoverMenu}">
<MenuItem.Header>
<StackPanel Orientation="Horizontal">
<Label Content="Password" Width="76" Padding="0"/>
<PasswordBox x:Name="PasswordInput" Width="134"/>
</StackPanel>
</MenuItem.Header>
</MenuItem>
<MenuItem x:Name="LoginMenuStatus" Header="" Template="{DynamicResource NoHoverMenu}" Foreground="#FF515151" FontSize="11" Visibility="Collapsed"/>
<MenuItem x:Name="LoginButtonMenuItem" Template="{DynamicResource NoHoverMenu}">
<MenuItem.Header>
<Button x:Name="LoginButton" Content="Login" Click="LoginButton_Click"/>
</MenuItem.Header>
</MenuItem>
<Separator x:Name="LoginMenuSeperator"/>
<MenuItem x:Name="RegisterAccountMenuItem" Header="Register account"/>
<MenuItem x:Name="ForgotLoginMenuItem" Header="Forgot login"/>
<MenuItem x:Name="LogoutMenuItem" Header="Logout" Visibility="Collapsed" Click="LogoutMenuItem_Click"/>
</MenuItem>
</Menu>
<Label x:Name="WindowTitle" Content="DS4Windows DSDCS Build (1.5 ALPHA)" Height="30" Margin="5,5,100,0" VerticalAlignment="Top" DockPanel.Dock="Top" FontSize="14" Foreground="White" HorizontalAlignment="Center"/>
<StackPanel x:Name="ExitMenu" Width="100" DockPanel.Dock="Right" Margin="0,-35,0,0" RenderTransformOrigin="0.525,0.211" HorizontalAlignment="Right" MouseLeave="StackPanel_MouseLeave" Panel.ZIndex="2">
<Button x:Name="CloseButton" Content="X" Height="22" VerticalAlignment="Top" Margin="0,5,5,0" Background="#FFFF7878" FontWeight="Bold" Click="CloseButton_Click" RenderTransformOrigin="0.45,0.421" HorizontalAlignment="Right" Width="22" MouseEnter="CloseButton_MouseEnter"/>
<Button x:Name="MinimizeCloseOpt" Content="Minimize to tray" Visibility="Hidden" Click="MinimizeCloseOpt_Click"/>
<Button x:Name="QuitCloseOpt" Content="Quit" Visibility="Hidden" Click="QuitCloseOpt_Click"/>
</StackPanel>
<Label x:Name="UsernameLabel" Content="Guest" Height="28" VerticalAlignment="Bottom" DockPanel.Dock="Right" Margin="0,0,-100,0" HorizontalAlignment="Right" Foreground="White"/>
</DockPanel>
<DockPanel x:Name="Footer" Height="28" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Bottom">
<Image VerticalAlignment="Bottom" DockPanel.Dock="Right" Source="Icons/ResizeGrip.png" Stretch="None" HorizontalAlignment="Right" PreviewMouseLeftButtonDown="WindowResize" Cursor="SizeNWSE">
<Image.OpacityMask>
<ImageBrush ImageSource="Icons/ResizeGrip.png" Stretch="None"/>
</Image.OpacityMask>
</Image>
</DockPanel>
<DockPanel x:Name="AddPanel" Height="94" LastChildFill="False" VerticalAlignment="Top" DockPanel.Dock="Bottom" HorizontalAlignment="Center">
<Frame Content="Frame" Height="90" VerticalAlignment="Top" Width="728" Source="http://dsdcs.com/index.php?template=frontend" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5"/>
</DockPanel>
<DockPanel x:Name="SidebarDockPanel" Background="#CCFFFFFF" Margin="0">
<StackPanel Height="305" VerticalAlignment="Top" Margin="0">
<telerik:RadOutlookBarItem Header="Home" Icon="Icons/Home.ico" IsSelected="True" FontSize="14">
<Grid Background="Transparent"/>
</telerik:RadOutlookBarItem>
<telerik:RadOutlookBarItem Header="Macros" Icon="Icons/Macros.ico" Height="38" FontSize="14">
<Grid Background="Transparent"/>
</telerik:RadOutlookBarItem>
<telerik:RadOutlookBarItem Header="Log" Icon="Icons/Log.ico" Height="38" FontSize="14">
<Grid Background="Transparent"/>
</telerik:RadOutlookBarItem>
<telerik:RadOutlookBarItem Header="Settings" Icon="Icons/Settings.ico" Height="38" FontSize="14">
<Grid Background="Transparent"/>
</telerik:RadOutlookBarItem>
</StackPanel>
</DockPanel>
<DockPanel x:Name="MainWinDockPanel" Background="#CCFFFFFF">
<Expander x:Name="CurrentGameWindow" Header="Currently Playing: Nothing" VerticalAlignment="Bottom" DockPanel.Dock="Bottom" Background="#B2000000" Foreground="White" FontWeight="Bold" FontSize="14" Panel.ZIndex="1" BorderBrush="{x:Null}" BorderThickness="0">
<DockPanel Height="128" VerticalAlignment="Top" DockPanel.Dock="Bottom" UseLayoutRounding="False">
<Image x:Name="CurrentGameBoxart" Height="128" VerticalAlignment="Top" RenderOptions.BitmapScalingMode="HighQuality">
<Image.OpacityMask>
<ImageBrush ImageSource="TempImages/5647-1.jpg"/>
</Image.OpacityMask>
</Image>
<Grid x:Name="CurrentGameBGFrame" Margin="0">
<Image x:Name="CurrentGameRating" HorizontalAlignment="Left" Height="16" Margin="12,55,0,0" VerticalAlignment="Top" Width="80"/>
<Label x:Name="CurrentGamePublisher" Content="" HorizontalAlignment="Left" Margin="12,3,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
<Label x:Name="CurrentGameDeveloper" Content="" HorizontalAlignment="Left" Margin="12,24,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
<Label x:Name="CurrentGameGenres" Content="" HorizontalAlignment="Left" Margin="329,3,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
<Label x:Name="CurrentGamePlayers" Content="" HorizontalAlignment="Left" Margin="329,24,0,0" VerticalAlignment="Top" Foreground="White" FontSize="12"/>
</Grid>
</DockPanel>
</Expander>
<ScrollViewer Grid.Row="1" VerticalScrollBarVisibility="Auto" HorizontalScrollBarVisibility="Auto" >
<Frame x:Name="MainNav" Content="Frame" Source="/DS4Windows;component/Pages/Home.xaml" BorderThickness="0" Margin="0"/>
</ScrollViewer>
</DockPanel>
</DockPanel>
</Window>
Child page XAML:
<Page x:Class="DS4Windows.Pages.Home"
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"
Title="Home" Margin="0" HorizontalAlignment="Left" VerticalAlignment="Top">
<StackPanel x:Name="ControllerStack" Margin="0">
<StackPanel Height="69" Orientation="Horizontal">
<Image x:Name="Icon1" Width="61" Source="/DS4Windows;component/ControllerStates/wireless-icon-48.png"/>
<StackPanel Margin="30,0,0,0">
<ProgressBar x:Name="BatteryMeter1" Height="20" Margin="0,18,0,0" Width="150">
<ProgressBar.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFFF4C4C" Offset="0"/>
<GradientStop Color="#FF830000" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Foreground>
</ProgressBar>
<Label x:Name="ChargeStatus1" Content="" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
<StackPanel Height="69" Orientation="Horizontal">
<Image x:Name="Icon2" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
<StackPanel Margin="30,0,0,0">
<ProgressBar x:Name="BatteryMeter2" Height="20" Margin="0,18,0,0" Width="150">
<ProgressBar.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37E03F" Offset="0"/>
<GradientStop Color="#FF1F9524" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Foreground>
</ProgressBar>
<Label x:Name="ChargeStatus2" Content="" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
<StackPanel Height="69" Orientation="Horizontal">
<Image x:Name="Icon3" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
<StackPanel Margin="30,0,0,0">
<ProgressBar x:Name="BatteryMeter3" Height="20" Margin="0,18,0,0" Width="150">
<ProgressBar.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37E03F" Offset="0"/>
<GradientStop Color="#FF1F9524" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Foreground>
</ProgressBar>
<Label x:Name="ChargeStatus3" Content="" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
<StackPanel Height="69" Orientation="Horizontal">
<Image x:Name="Icon4" Width="61" Source="/DS4Windows;component/ControllerStates/DS4_C_Gray-icon-48.png"/>
<StackPanel Margin="30,0,0,0">
<ProgressBar x:Name="BatteryMeter4" Height="20" Margin="0,18,0,0" Width="150">
<ProgressBar.Foreground>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF37E03F" Offset="0"/>
<GradientStop Color="#FF1F9524" Offset="1"/>
</LinearGradientBrush>
</ProgressBar.Foreground>
</ProgressBar>
<Label x:Name="ChargeStatus4" Content="" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</StackPanel>
</Page>
If you want to understand why things in WPF looking odd or how they render you should take a look at Snoop.
Hint: If you want to jump to the current Control move the mouse over it and press Shift + Ctrl
So, not an 100% answer to the question of why, but a fix; I added both the sidebar and main window dock panels to a new parent dockpanel control ans set the opaque background on that wrather the child controls. This got rid of the border which I suspect was actually a gap.
The why, at least I think; With all child and parent controls on the sidebar set to auto the width was being determined by calculating the width of the button string + image + padding. Since WPF is hardware rendered the width could have calculated it with aliasing considered and the response may have been a floating point number rather than an integer like if I manually set the width myself. so with a floating point width the aliasing of the two adjacent controls likely caused a fraction of a pixel width of background to show through, result in a 1px line or border as I thought it was. And since design time renders the control in SW mode this was never seen until the application was actually run.
Not sure if its taboo to answer my own ? but I figured I would for others sake who may come here with same issue.
The answers in this question may be helpfull
How to fix empty space between a border and a background in button with rounded corners?
WPF renders the elements with anti-aliasing by default and this can
result in small gaps between shapes.
Set the EdgeMode to Aliased on your Border this should get rid
of the small gap
RenderOptions.EdgeMode="Aliased"
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.
I have this xaml code of my metro app.
<Grid Width="531" Height="531">
<Grid.Background>
<ImageBrush ImageSource="{Binding image1}" Stretch="UniformToFill" />
</Grid.Background>
<StackPanel Background="#0072B0" Opacity="0.7" VerticalAlignment="Bottom">
<Border BorderThickness="0,0,0,1" BorderBrush="White">
<TextBlock Text="{Binding name}" VerticalAlignment="Bottom" Opacity="1" Style="{StaticResource BigTopDealItemTitle}"/>
</Border>
</StackPanel>
</Grid>
I wanna make a blur panel and clear text on it. But look like the text in TextBlock blur too, even I set Opacity of it with 1.
To make a background blurry without making the textbox blurry do something like this:
<Grid Width="531" Height="531">
<Grid.Background>
<ImageBrush ImageSource="{Binding image1}" Stretch="UniformToFill" />
</Grid.Background>
<StackPanel Background="#0072B0" Opacity="0.7" VerticalAlignment="Bottom">
<Grid>
<Border BorderThickness="0,0,0,1" BorderBrush="White"/>
<TextBlock Text="{Binding name}" VerticalAlignment="Bottom" Style="{StaticResource BigTopDealItemTitle}"/>
</Grid>
</StackPanel>
</Grid>
This will put the TextBlock on top of the background (i.e. the Border) without it being affected by the properties of the Border.