I'm using WPF (c#) form with background image (background imagebrush).
I want to make all the UI elements(button , title, textbox)... become semi-transparent so that they don't cover the image completely,
but the background image still being visible (not semi-transparent)
I would like a way we can do it without having to set all the opaque value of UI elements.
Maybe this could help
<Window.Resources>
<Style x:Key="transparentControls" TargetType="Button">
<Setter Property="Opacity" Value="0.1"/>
<Setter Property="Background" Value="Green"/>
</Style>
</Window.Resources>
<Grid>
<Grid.Background>
<ImageBrush ImageSource="MyImage.jpg"/>
</Grid.Background>
<Button Height="24" Width="100" Style="{StaticResource transparentControls}" VerticalAlignment="Top" Content="Hey"/>
<Button Height="24" Width="100" Style="{StaticResource transparentControls}" Content="There"/>
<Button Height="24" Width="100" Style="{StaticResource transparentControls}" VerticalAlignment="Bottom" Content="Click Me"/>
</Grid>
Just try to put all your UI elements in a Canvas or Grid and set the Opacity of that parent element.
Like that:
<Canvas Opacity="1">
<Button Width="100" Height="100"></Button>
</Canvas>
I hope this was what you meant.
Related
I have the below stackpanel that features 2 images. One of a tick and one of an exit.
<StackPanel Grid.Row="3" Orientation="Horizontal">
<Image Source="C:\Users\USER\Pictures\Tick.png" Height="100" Margin="55,10,0,5" HorizontalAlignment="Left" VerticalAlignment="Center" />
<Image Source="C:\Users\USER\Pictures\Exit.png" Height="88" Margin="75,10,20,5" HorizontalAlignment="Right" VerticalAlignment="Center"/>
</StackPanel>
How am I able to make these 2 images act like a button? I know that you can use < button /> to create a new button, but I want to add a sort of property that will act as a button click when clicked.
Edit: I do not want the image to look like a button does with the outline and click effect. It just needs to be the image.
You could completely customize the appearance of a button but still keep its functionality by creating a custom template:
<Button Click="Button_Click">
<Button.Style>
<Style TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="Button">
<Image Source="C:\Users\USER\Pictures\Tick.png" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Button.Style>
</Button>
The above sample button should look exactly like an image but still be clickable like any other button.
Why don't you just make the image the Content of a Button?
<Button Height="100" Margin="55,10,0,5" HorizontalAlignment="Left" VerticalAlignment="Center">
<Image Source="C:\Users\USER\Pictures\Tick.png"/>
</Button>
I have two buttons that use a static common style:
<Button x:Name="BtnCreate" Height="22" Width="150" Style="{StaticResource Style.Button.Trash}"/>
<Button x:Name="aefae" Height="22" Width="150" Style="{StaticResource Style.Button.Trash}"/>
The style is very basic:
<Style TargetType="Button" x:Key="Style.Button.Trash"
BasedOn="{StaticResource {x:Type Button}}">
<Setter Property="Content">
<Setter.Value>
<StackPanel Orientation="Horizontal" >
<Image Source="{StaticResource Image.Trash}" Width="22" Height="22"/>
<Label Content="Save" VerticalAlignment="Center" Height="26" />
</StackPanel>
</Setter.Value>
</Setter>
</Style>
The style applies to the first button and display both the image an the text however the second button does not display anything except a grey button.
Why does the second button not use the static style?
As you're trying to add the same Content to two Buttons, elements (present in Style) cannot be added to two different Logical Parents. To avoid this, you can set x:Shared="False" to your style.
I am looking for a way to add colour to Segoe MDL2 icons. The glyphs in my application are currently TextBlock resources, defined like this:
<TextBlock x:Key="PenSymbol" x:Shared="False" FontFamily="Segoe MDL2 Assets" Text="" FontSize="16" TextOptions.TextRenderingMode="Grayscale"/>
The effect I'm after is the one in the left 3 icons:
This is a screenshot of the toolbar in Window 10 Sketchpad (after applying the Creators update).
Edit: I know how to change the text colour, I am trying to figure out how to get the "partial fill"-effect (blue, black and yellow in the screenshot).
Edit2: It is necessary to display 2 different glyphs to achieve this effect. The glyphs necessary for the background were added to the Segoe MDL2 font in the last update. Thanks to mm8 for pointing me in the right direction.
XAML:
<Style x:Key="SymbolText" TargetType="{x:Type TextBlock}">
<Setter Property="FontSize" Value="16"/>
<Setter Property="UseLayoutRounding" Value="True"/>
<Setter Property="TextAlignment" Value="Center"/>
<Setter Property="VerticalAlignment" Value="Center"/>
<Setter Property="FontFamily" Value="Segoe MDL2 Assets"/>
<Setter Property="TextOptions.TextRenderingMode" Value="Grayscale"/>
</Style>
<StackPanel Orientation="Horizontal">
<Grid Margin="4">
<TextBlock Text="" Style="{StaticResource SymbolText}" Foreground="OrangeRed"/>
<TextBlock Text="" Style="{StaticResource SymbolText}"/>
</Grid>
<Grid Margin="4">
<TextBlock Text="" Style="{StaticResource SymbolText}" Foreground="LightGreen"/>
<TextBlock Text="" Style="{StaticResource SymbolText}"/>
</Grid>
<Grid Margin="4">
<TextBlock Text="" Style="{StaticResource SymbolText}" Foreground="LightBlue"/>
<TextBlock Text="" Style="{StaticResource SymbolText}"/>
</Grid>
</StackPanel>
Result:
Set the Foreground property to a Brush:
<TextBlock x:Key="PenSymbol" x:Shared="False" Foreground="Red" FontFamily="Segoe MDL2 Assets" Text="" FontSize="16"/>
Othwerwise layering and colorization effects can be achieved by drawing glyphs directly on top of each other as stated in the documentation on MSDN: https://learn.microsoft.com/en-us/windows/uwp/style/segoe-ui-symbol-font
You can put one gliph over another and colorize it this way. Example:
<Grid>
<FontIcon Foreground="#f8d876" FontFamily="Segoe MDL2 Assets" Glyph="" />
<FontIcon FontFamily="Segoe MDL2 Assets" Glyph="" />
</Grid>
Result:
I made this and it works:
I've added a grid under a button, added two labels with MDL 2 icons and with some alignment it's an help button with a circular background!
<Button>
<Grid>
<Label Content='' Foreground="#FFBFBEBF" />
<Label Content='' Foreground="#FF0066FF" FontSize="18" HorizontalContentAlignment="Center" VerticalContentAlignment="Center" />
</Grid>
</Button>
I have a program that displays a grid that contains an image and 3 buttons. The buttons have been sized in the Visual Studio designer to fit inside separate circles (each approx 1/4" in diameter). When I run the program each of the buttons all move down and to the right about 1/2 the width of the button. If I add an explicit width and height to each button I can keep the size the same but the buttons still moves slightly to the right and maybe even down slightly.
My guess is that it has to do with how Windows has displayed the image to fit on the screen and that this scaling/positioning has not been applied to the buttons. If so, I have no idea how to correct the issue.
Any ideas on how to correct this problem would be greatly appreciated.
Chris
My XAML code:
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow"
Height="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Height}"
Width="{Binding Source={x:Static SystemParameters.WorkArea}, Path=Width}"
WindowStartupLocation="CenterScreen"
Background="CornflowerBlue"
ResizeMode="CanMinimize"
>
<Window.Resources>
<Style x:Key="{x:Type Button}" TargetType="{x:Type Button}">
<Setter Property="Background" Value="Black"/>
<Setter Property="Opacity" Value="1"/>
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="Cursor" Value="Hand"/>
</Trigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid Name="grid1">
<Image Name="image" Source="D:\CEP\Image1.jpg" Stretch="Uniform">
</Image>
<Button Margin="494,0,1155,801" Click="button_407_Click"></Button>
<Button Margin="339,107,1310,856" />
<Button Margin="401,102,1248,860" />
</Grid>
Set the Stretch property of the Image to None to prevent the image from sizing.
You have positioned the buttons by setting their margins. As soon as the window is resized their positions and sizes will change.
Add a Canvas to the grid and put the image and the buttons on the canvas using absolute positioning (Canvas.Left="..." Canvas.Top="..."
If, after doing this, you do not like the results because you still want to resize the the images and move the buttons in sync you could wrap the Canvas in a ViewBox to make it scale.
EDIT
<Grid>
<Viewbox>
<Grid HorizontalAlignment="Center" VerticalAlignment="Center">
<Image Source="Images\wp_1680.jpg" Width="300" Height="200"
HorizontalAlignment="Center" VerticalAlignment="Center"/>
<Canvas Width="300" Height="200"
HorizontalAlignment="Center" VerticalAlignment="Center">
<Button Canvas.Top="25" Canvas.Left="50" Content="OK"/>
<Button Canvas.Top="125" Canvas.Left="150" Content="Cancel"/>
</Canvas>
</Grid>
</Viewbox>
</Grid>
This solution includes nice scaling through the Viewbox, but it can be removed as well.
Please organize all your posts. If you want to say something about my answer add it as a comment to my answer if you want add to your question, edit the question.
I had a quick Google, and a quick look around StackOverflow, but couldn't find anyone else who'd run into this problem.
I want to create a close button with a little X in it. The close button will do things like fade in and out when you're hovering over the item containing it, change colour when you mouse over, and all the usual WPF loveliness. Bottom line, it doesn't seem like it should be that difficult, but I'm running into one of the weirdest issues ever before I've even got to this stage.
Here's my XAML style for the button:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="TabCloseButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Content">
<Setter.Value>
<Grid>
<Line Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
X1="0"
Y1="0"
X2="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Mode=OneWay}"
Y2="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualHeight, Mode=OneWay}"/>
<Line Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground}"
X1="0"
Y1="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualHeight, Mode=OneWay}"
X2="{Binding RelativeSource={RelativeSource AncestorType=Grid}, Path=ActualWidth, Mode=OneWay}"
Y2="0"/>
</Grid>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
And I create my button, just as a test, like this:
<Window x:Class="WpfTestApp.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="124" Width="569">
<Grid Background="#2b3c59">
<StackPanel Orientation="Horizontal">
<!-- Other controls removed for clarity -->
<Button Style="{DynamicResource TabCloseButtonStyle}"
HorizontalAlignment="Center"
VerticalAlignment="Bottom"
Padding="2"
Margin="0, 10, 0, 0"
MinWidth="50"
MinHeight="50"></Button>
</StackPanel>
</Grid>
</Window>
And here's where it all goes horribly wrong. When you run the application the button will expand infinitely, one pixel at a time, horizontally, and vertically until it hits the height of the window.
Now I can understand why this is happening: the Lines actually go one unit beyond the width and height of the Grid causing the Grid to expand by one unit, then there's a relayout, the data binding causes the lines to redraw, ad infinitum.
So, to try and deal with this I decided to put a in the grid but then, no matter what I do with HorizontalAlignment and VerticalAlignment, I end up with both the Canvas and the Grid having zero width and height, which means I don't get my cross, which is massively irritating. If I bind to the ActualWidth and ActualHeight properties of the button I just end up with an X that has the top-left corner centred on the centre of the button.
Does anybody have any idea at all what I can do to fix this? I'd be extremely grateful for any pointers - WPF is still a rather new beast to me.
Thanks!
You shouldn't have to resort to bindings just to do layout. As you've seen, the bindings and the layout systems don't work in concert (I think databinding gets priority over layout, but in your case, layout causes another databinding)
You should be able get quite a nice looking, stretchable X with a just a Path:
<Path Data="M0,0 L1,1 M0,1 L1,0" Stretch="Uniform" Stroke="Red" />
If you want it to scale with the button size instead of stretch (scale affects apparent stroke width), then just use a ViewBox
Instead of binding, I'd suggest using the Stretch and Margin or Padding properties, like the following
<Grid Margin="2">
<Line X1="0" Y1="0" Y2="1" X2="1" Stroke="Black" Stretch="Fill" />
<Line Y1="1" X2="1" Stroke="Black" Stretch="Fill" />
</Grid>
Update
So the problem with your example seems to be the min height & width. If you can't just use height & width, I'd suggest something like the following
<Grid MinHeight="{TemplateBinding MinHeight}" MinWidth="{TemplateBinding MinWidth}">
<Line X1="0" Y1="0" Y2="1" X2="1" Stroke="Black" Stretch="Fill" />
<Line Y1="1" X2="1" Stroke="Black" Stretch="Fill" />
</Grid>
Thanks everyone. Rob's solution with the Viewbox turned out to be the answer. The button behaves perfectly, even if I remove the MidWidth and MinHeight attributes from the Button declaration in MainWindow.xaml.
Here's my modified style:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Style x:Key="TabCloseButtonStyle" TargetType="{x:Type Button}">
<Setter Property="Foreground" Value="{DynamicResource {x:Static SystemColors.ControlBrushKey}}"/>
<Setter Property="Background" Value="Transparent"/>
<Setter Property="Content">
<Setter.Value>
<Grid>
<Viewbox>
<Path Data="M0,0 L10,10 M0,10 L10,0"
Stretch="Uniform"
Stroke="{Binding RelativeSource={RelativeSource AncestorType=Button}, Path=Foreground, Mode=OneWay}" />
</Viewbox>
</Grid>
</Setter.Value>
</Setter>
</Style>
</ResourceDictionary>
Thanks again for all the suggestions!