I create a transparency window with different textblock but my text isn't always readable because it's depends of colors user's window.
So I want apply the same effect on a text like the effect of my title window,
It's like a white shadow.
Thank you
The best way to do this would be to use a shader effect. I tried to do this with the built in Blur effect but it seems they don't blend with Alpha.
Below is an example of how I would start and doesn't represent an end product. HLSL border effect based off of Emboss effect.
View the full image for a better understanding. This effect only adds like 2 px border so the scaling makes it look even worse.
I'm pretty bad at writing HLSL the code on the right is just copy-pasted from http://brooknovak.wordpress.com/2008/09/16/simple-image-filters-written-as-hlsl-pixel-shaders/ with modification.
I'm sure someone who knew HLSL / GLSL could write a blur effect that works correctly. Note that this effect works across a full image and thus needs to know the image size. You should put them in a constant buffer and use them instead of the hardcoded 500.0 for width and height. They need to be the width/height of the rendered object. In my example it is actually the entire left half side of the window not just the size of the text because my XAML looks like this...
<Window x:Class="WpfApplication2.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525"
Loaded="Window_Loaded" Background="Transparent">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="264*" />
<ColumnDefinition Width="239*" />
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="218*" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Text="The quick brown fox jumped over the lazy dog." Foreground="White" Background="Transparent" Grid.RowSpan="3" x:Name="PART_TextBlock"/>
<TextBox x:Name="PART_TextBox" Grid.Column="1" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible" AcceptsReturn="True" AcceptsTab="True" />
<TextBlock x:Name="PART_Error" Grid.Column="1" Grid.Row="1"/>
<Button Content="Compile & Apply" Grid.Column="1" Grid.Row="2" Padding="4,1" Margin="4" HorizontalAlignment="Center" Click="Button_Click" />
</Grid>
</Window>
Related
I have an AutoCompleteTextBox in UWP is exhibiting a really odd behavior, and I can't figure out what's causing it. The TextBox is in a Grid, but the user can type past the bounds of the TextBox, so the first and last characters of each line are hidden behind the surrounding border. I've taken some screenshots to hopefully make this make more sense, as it's difficult to describe.
I've tried everything I can think of, but can't seem to get it to stop doing this. The only effect I had at all was in changing the HorizontalAlignment of the TextBox. Originally it was Stretch, and only the right side of the TextBox had cutoff letters. When I changed it to Center, it divided the cut-off section between both the left and right.
Does anybody have any ideas as to what's going on?
In the 1st picture, the actual TextBox area is defined by the box on the far outer edges of the ContentDialog [with the drag handles left of the (116)].
TextBox in VS Designer
In the second picture, the letters typed in the TextBox are 2 W's. If you look closely, you can just see the very right of the 1st W to the left of the full W there.
TextBox during execution
XAML:
<ContentDialog
x:Class="FlipPanelTest2.ComposeTweet"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:FlipPanelTest2"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
RequestedTheme="Dark"
Title="{Binding SendTo}"
Foreground="Gray"
Width="600"
PrimaryButtonText="Cancel"
SecondaryButtonText="Tweet!"
SecondaryButtonStyle="{StaticResource TweetContentDialogButtonStyle}"
PrimaryButtonStyle="{StaticResource CancelButtonStyle}"
PrimaryButtonClick="ContentDialog_PrimaryButtonClick"
SecondaryButtonClick="ContentDialog_SecondaryButtonClick">
<Grid Width="Auto">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBox x:Name="tweetText" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Stretch" Background="White" TextWrapping="Wrap" Margin="2" TextChanged="TextBox_TextChanged" MaxHeight="180" MinHeight="112" Width="540" />
<StackPanel x:Name="characterCount" Orientation="Horizontal" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Center">
<TextBlock x:Name="currentChars" HorizontalAlignment="Right" Grid.Row="1" FontSize="10" Text="{Binding TweetCharacters}" />
<TextBlock x:Name="charsDivider" HorizontalAlignment="Right" Grid.Row="1" FontSize="10" Text="/" />
<TextBlock x:Name="maxChars" HorizontalAlignment="Right" Grid.Row="1" FontSize="10" Text="{Binding MaxCharacters}" />
</StackPanel>
</Grid>
Well some more searching found the answer apparently. I hadn't thought to search for a max size on the ContentDialog, hence the reason I didn't find this before. Providing a link to the answer though for future people to use:
Quoted from ContentDialog max width:
In your App.xaml, try setting the ContentDialogMaxWidth to say, 800.
The default is 548. You might want to increase the height too.
<Application.Resources>
<x:Double x:Key="ContentDialogMaxWidth">800</x:Double>
<x:Double x:Key="ContentDialogMaxHeight">756</x:Double>
</Application.Resources>
ContentDialog max width
It's the last answer listed there, for some reason not the accepted answer. :)
Assuming we have a simple window:
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="clr-namespace:WpfApplication1"
Width="300" Height="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="2,2,2,2">
<TextBlock
Text="Button 1.
It has some text.
Button shouldn't shrink less then the text size."
TextWrapping="WrapWithOverflow" />
</Button>
<Button Grid.Row="1" Content="Button 2" Margin="2,2,2,2" />
</Grid>
</Window>
Seems ok. However, after resizing, the upper button's content is cropped:
The desired layout should look like this:
In text: make the row height behave as proportional (*) with MinHeight equal to it's Auto height. In other words, have the Height to be Max(1*,Auto).
I assume that if WPF is capable of determining size of row automatically when set to Auto, then there should be a way to make it respect that size when proportionally sizing.
I found somewhat related questions (1, 2) but was unable to adapt techniques used there to my case.
The only result achieved at the moment is
Bind Button.MinHeight to nested TextBlock.ActualHeight
In code behind: enumerate all grid's childs placed in the first row, find maximal MinHeight, set it as RowDefinition.MinHeight. Looks crappy because the button is bigger then the text block.
May be something related to Measure & Arrange is needed? Or it is not worth the effort and it would be better to just place MinHeight manually (and also have some problems with the localization strings lenght differences)?
Here's a quick and easy trick.
Duplicate the control (and hide it) and use its measurements to find the MinHeight:
<Grid>
<Grid x:Name="dummyControl" VerticalAlignment="Center">
<Button Grid.Row="0" Margin="2,2,2,2" Visibility="Hidden" IsHitTestVisible="False">
<TextBlock
Text="Button 1.
It has some text.
Button shouldn't shrink less then the text size."
TextWrapping="WrapWithOverflow" />
</Button>
</Grid>
<Grid>
<Grid.RowDefinitions>
<RowDefinition MinHeight="{Binding ElementName=dummyControl, Path=ActualHeight}" Height="*" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<Button Grid.Row="0" Margin="2,2,2,2">
<TextBlock
Text="Button 1.
It has some text.
Button shouldn't shrink less then the text size."
TextWrapping="WrapWithOverflow" />
</Button>
<Button Grid.Row="1" Content="Button 2" Margin="2,2,2,2" />
</Grid>
</Grid>
VerticalAlignment of dummyControl should be anything other than Stretch
I'm having a problem with determining which element is responsible for a size misalignment. Here is a picture to illustrate it: click here to see it
The light grey area is the element size which I am trying to change, but cannot. The overall area is a User Control, the area inside the Tab is a WPF (as an element Host). I've tried changing both, but with no effect on the grey area (the other tabs are also affected by this). Here is the code for the hosted element (WPF):
<UserControl x:Class="SlideAnalyzer.DisplayAnalysis"
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:SlideAnalyzer"
mc:Ignorable="d"
d:DesignHeight="150.8" d:DesignWidth="201.2">
<Grid Name="displayGrid" Height="64" VerticalAlignment="Bottom" HorizontalAlignment="Center" Width="160" Margin="10,0,31.6,9.4" RenderTransformOrigin="0.496,0.94">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<Expander x:Name="expander" Grid.Row="0" Header="Titel zu lang" HorizontalAlignment="Left" VerticalAlignment="Top" Width="180" Background="Red" Margin="-10,-56,0,0">
<Grid Background="AliceBlue">
<TextBlock TextWrapping="Wrap"
Margin="5"><Run Text="This is some text content."/></TextBlock>
</Grid>
</Expander>
</Grid>
The host itself is a normal User Control. I cannot seem to get the right size of the hosted element so that the preview really reflects reality (because when I run the Add-In, the size of the WPF differs)
I tried changing the Properties of the UserControl and I found that AutoSize has a big impact when True (by default False)
Thanks!
NOTE: This is one of the first time I'm using WPF.
I am trying to align a certain control, let's say a button for now, in the bottom right corner. But when I debug my application, it misses 8 pixels to the bottom and right. I will attach 2 pictures to show you what happens.
How do I keep the button in place?
My XAML code:
<Window x:Class="Plugin_Manager.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="Plugin Manager" Height="350" Width="525" Loaded="Window_Loaded_1">
<Grid x:Name="GridMain">
<Button Content="Refresh" Margin="432,288,0,0" VerticalAlignment="Top" HorizontalAlignment="Left" Width="75"/>
<ListView HorizontalAlignment="Left" Height="273" Margin="10,10,0,0" VerticalAlignment="Top" Width="497">
<ListView.View>
<GridView>
<GridViewColumn/>
</GridView>
</ListView.View>
</ListView>
</Grid>
If you choose to use Grid layout you should try to avoid placing objects via Margin. Margin should be used to create buffer around an object, not move it to a specific point in the window. Use the layout manager's power to your advantage!
Here is a Grid example that does what you are looking for.
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="*" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<ListView Grid.Row="0" />
<Button Grid.Row="1" HorizontalAlignment="Right" Content="Push Me" />
</Grid>
I would also read up on Layout Manager in WPF. There are several; each having its own advantages & disadvantages.
Here is a DockPanel version.
<DockPanel>
<Button DockPanel.Dock="Bottom" HorizontalAlignment="Right" Content="Push Me" />
<ListView />
</DockPanel>
To create your buffer between the button and the window chrome you could do a few different things:
<Grid Margin="10"> will apply a 10 pixel space between all content and the window chrome on all side.
<Grid Margin="0,0,10,10"> would indent all content, but only on the right & bottom.
<Grid Margin="10,0,10,10"> indents all around, except the top (I commonly do this one, with a different margin value).
<Button Margin="0,0,10,10"> would indent only the button from the chrome (this is the direct answer to your comment question).
Replace the Grid above with DockPanel for the second example, or whatever other Layout Manager you are using.
A usability side note: Your confirmation buttons (I'm assuming your button will be an Ok/Cancel type button) should not be indented differently from the rest of your content. All controls that butt up against the right margin should do so at the same point (i.e., you can draw a vertical line down the right side of them all).
So, using your question's example: your button should not be indented 10 pixels to the right while your list box is not. Keeping things lined up will improve the overall look to your application.
(this ends my "usability and look-and-feel is important" side note) :)
<Button VerticalAlignment="Bottom" HorizontalAlignment="Right" Margin="5"/>
Some code example will help. Try using the alignment in xaml for your button as shown below. Ensure that the margins on the button are 0.
<Button Margin="0" HorizontalAlignment="Right" VerticalAlignment="Bottom"/>
Looking at the sample code, it is your margins and the alignment you have that are probably causing that.
Just some pointers that may help. Instead of using large margins to align the controls, I find it much easier to work with Column and Row definitions on the grid. This way you can align your controls using the grid and they will size properly as you resize your window. I attached an example in hopes it helps in your new adventures with WPF!
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="150"/>
<ColumnDefinition Width="150"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition/>
</Grid.RowDefinitions>
<TextBlock Grid.Column="0" Grid.Row="0" Text="Version Date" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="0" Grid.Row="1" Text="{Binding DateSubmitted}" Margin="3"/>
<TextBlock Grid.Column="1" Grid.Row="0" Text="Report" Margin="3" VerticalAlignment="Center"/>
<TextBlock Grid.Column="1" Grid.Row="1" Text="{Binding ReportName}" Margin="3"/>
</Grid>
I am working on a WPF control whose content is a grid. I am relatively new to WPF so I am wondering if the below is the right way to go about this.
I placed two labels in the grid, both in the same column but adjacent rows:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledProject8.Window1"
x:Name="Window"
Title="Window1"
Width="200" Height="200">
<Grid x:Name="LayoutRoot">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100"/>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="1.23" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Label Grid.Row="1" Content="45" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Top"/>
</Grid>
I set the labels' vertical alignment so that the label on row zero is aligned to the bottom and the label on row 1 is aligned to the top.
Now, this is close to what I want but I need the actual text of the label in row 1 to be closer to the text of label in row zero. To do this I set the margin of the label in row 1 to a negative value:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="UntitledProject8.Window1"
x:Name="Window"
Title="Window1"
Width="200" Height="200">
<Grid x:Name="LayoutRoot">
<Grid HorizontalAlignment="Left" VerticalAlignment="Top" Width="100" Height="100"/>
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Label Grid.Row="0" Content="1.23" FontSize="18" HorizontalAlignment="Center" VerticalAlignment="Bottom"/>
<Label Grid.Row="1" Content="45" FontSize="48" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="0,-20,0,0"/>
</Grid>
Is that the right way to do it? Granted that my examples above are simplistic but as the grid contents grow and get more complicated (such as including other layout containers) is setting different values for control margins the correct way to make adjacent cells closer or farther apart?
I am just a little concerned since I am trying my best to avoid hard coding any types of "designer" values like I did when working with WinForms (such as setting exact coords for location and values for sizes) and would like to let the layout manager just take care of it. However, it looks like setting the margin is the only way to go.
Thanks for the help :)
That looks good! The only thing I was caught a little off guard with was the -20 for the top margin (instead of 20 for the bottom which should do the same thing), but I would only change that for clarity.
The main thing to note is the container of choice, which Grid will definitely work for you. Another feature of this is that as you stretch the Grid, the distance between your elements will proportionally grow (probably what you want anyway). The only weakness of the Grid is that it's not the most efficient. Mainly because you can do so much with it.
You could accomplish the same thing as above with a canvas (with the stretching feature) or if you didn't want the distance to stretch you might try a stackpanel, which is also going to be more efficient than the Grid. There are a few other panels as well, but becoming acquainted with what they can do (and how well they perform) is really helpful, especially when having to create more complex layouts.
As for the Margin, yeah that, along with setting width and height, are standard ways of setting spacing.