I am developing an on-screen keyboard where each key generates a sequence of three keystrokes to another application. Each button has a text description. But now clients want the function to be able to choose to see which characters are sent. Then I want the chars to be displayed over the descriptive text so that it is still possible to imagine the text below, see my suggestion below. But how do I do that?
one simple solution is to put 2 textblocks in a grid and make the background of the top one transparent.
<Grid Background="White" Width="100" Height="100">
<TextBlock Text="sdjfkjkf jskljfkl s flksjlkfjslkfjsdlkfjlök fjösljfslkdöfjklsdjfls" TextWrapping="Wrap"
HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
<TextBlock Padding="10,3" Text="ABc" FontSize="16" FontWeight="Bold" HorizontalAlignment="Center" VerticalAlignment="Center">
<TextBlock.Background>
<RadialGradientBrush>
<GradientStop Color="#00EFEEEE" Offset="1"/>
<GradientStop Color="#B2EDC4C4" Offset="0.836"/>
</RadialGradientBrush>
</TextBlock.Background>
</TextBlock>
</Grid>
Place 2 TextBox or TextBlock one on top of the other, and make the background of the top one transparent.
Related
I want to develop a WindowsPhone 8 app with a home page like the fourth phone on this page. The one with a mountain.
You can see an image with two layers over it. My problem is that I don't know how to call that effect in English, and also, I don't know how to do it.
Maybe I will need to make three copies of my image: one untouched, a second one with, a blur effect? and a third one with a 'bigger' blur effect.
Or maybe, I have to add two Grids with some white background and with an opacity less than 100%.
How would you do it?
Your solution is just a good one, I would the samething, and I don't expect that application to be implementing something different, in détails I would do :
One Grid with High Blur on the background.
Another Grid with middle Blur on the front. I'll use an OpacityMask set to a RadialGradientBrush to create that ring effect just like in here : http://msdn.microsoft.com/en-us/library/bb979637(v=vs.95).aspx
And one lase Grid with no Blur in the Front of The previous Grid again with a OpacityMask also set to a RadialGradientBrush.
The three Grids will all have the same Background TileBrush, example :
The Result I've made :
Code :
<StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
<TextBlock Text="The effect you asked, with :" Style="{StaticResource PhoneTextNormalStyle}" Margin="12,0"/>
<TextBlock Text="That's Clapton" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
</StackPanel>
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel1" Grid.Row="1" Margin="12,0,12,0">
<Grid.Background>
<ImageBrush ImageSource="Eric_Clapton_Blur3.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
<Grid x:Name="ContentPanel2" Grid.Row="1" Margin="12,0,12,0">
<Grid.OpacityMask>
<RadialGradientBrush Center="0.5,0.5">
<RadialGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" TranslateX="0.4" ScaleX="1.4"/>
</RadialGradientBrush.RelativeTransform>
<!-- This gradient stop is partially transparent. -->
<GradientStop Color="#00000000" Offset="1" />
<!-- This gradient stop is partially transparent. -->
<GradientStop Color="#20000000" Offset="0.741" />
<!-- This gradient stop is fully opaque. -->
<GradientStop Color="#FF000000" Offset="0.728" />
</RadialGradientBrush>
</Grid.OpacityMask>
<Grid.Background>
<ImageBrush ImageSource="Eric_Clapton_Blur2.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
<Grid x:Name="ContentPanel3" Grid.Row="1" Margin="12,0,12,0">
<Grid.OpacityMask>
<RadialGradientBrush Center="0.5,0.5">
<RadialGradientBrush.RelativeTransform>
<CompositeTransform CenterY="0.5" CenterX="0.5" TranslateX="0.4" ScaleY="0.6"/>
</RadialGradientBrush.RelativeTransform>
<!-- This gradient stop is partially transparent. -->
<GradientStop Color="#00000000" Offset="1" />
<!-- This gradient stop is partially transparent. -->
<GradientStop Color="#20000000" Offset="0.741" />
<!-- This gradient stop is fully opaque. -->
<GradientStop Color="#FF000000" Offset="0.728" />
</RadialGradientBrush>
</Grid.OpacityMask>
<Grid.Background>
<ImageBrush ImageSource="Eric_Clapton.jpg" Stretch="UniformToFill"/>
</Grid.Background>
</Grid>
I know I didn't do it with perfection, and I used terrible naming for the Elements, It's just I've just woke up, and didn't even take my breakfast, hope that helps.
I am having a problem when it comes to going from Horizontal orientation to Vertical orientation and back to Horizontal on a stackpanel with the window SizeToContent property being changed as well. Here's my problem: whenever I go back and forth from vertical to horizontal or vice versa, I change the sizetocontent given the way the menu i am creating as to be done. However, i can't get the window to resize back to an appropriate size as before. For example:
State A:
this.SizeToContent = Manual
this.topLevelStackPanel.Orientation = Horizontal
State B
this.SizeToContent = WidthAndHeight
this.topLevelStackPanel.Orientation = Vertical
When state A is valid, the restore bounds for the window has this value: 22,29,960,22
When i go from A to B, the restore bounds changes to -1932, -532, 3212, 1092
Now i attempt to go back fro B to A, and the restore bounds don't get changed back to 22,29,960,22
Rather what I get is a huge window that covers up my screen. How do I reset the sizes and go back to the prior state. I have been stuck on this for a while now.
Here's my XAML
<Window.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF528ab5" Offset="0"/>
<GradientStop Color="#FF002d62" Offset="1"/>
</LinearGradientBrush>
</Window.Background>
<Window.ContextMenu>
<ContextMenu>
<MenuItem Header="Exit" Click="ExitContextMenuItem_Click" />
</ContextMenu>
</Window.ContextMenu>
<Window.BorderBrush>
<SolidColorBrush />
</Window.BorderBrush>
<StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Name="settingsExitStackPanel">
<Image x:Name="SettingsButton" HorizontalAlignment="Left" Source="Images/gear_icon.png" MouseDown="SettingsButton_MouseDown"/>
<TextBlock x:Name="pholder" Text=" " />
<Button x:Name="ExitButton" Content="X" Width="30" FontWeight="Bold" Click="ExitContextMenuItem_Click"/>
<TextBlock x:Name="pholder2" Text=" " />
</StackPanel>
</Grid>
I have a wpf mvvm application.
And have a GRID with multiple columns
whats best way to set the back ground color of grid-column in wpf?
dabble125's answer was perfect but to give you a sample and to mention a note that it is important where to place your rectangle see the code:
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition/>
<ColumnDefinition/>
<ColumnDefinition/>
</Grid.ColumnDefinitions>
<!-- this is not a good place for text block.
the text block is beneath the rectangle
so it would not be seen -->
<!--<TextBlock Grid.Column="1" Text="Some Text"/>-->
<Rectangle Grid.Column="1" Grid.RowSpan="1000">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FF83FF97" Offset="0" />
<GradientStop Color="White" Offset="1" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock Grid.Column="1" Text="Some Text"/>
</Grid>
One way:
Create a rectangle and set its fill to the color of your choice.
Then set its Grid.RowSpan value to a large number or the number of rows you have.
Create a rectangle and set its fill to the color of your choice.
Only having :
<Rectangle
Grid.Column="1"
Fill="#e8ebf1" />
works for me.
The Grid.RowSpan of previous answers is actually useless, and the LinearGradientBrush demonstrated is over-complicated for what is asked.
Here is what i've
<StackPanel>
<TextBlock> abc </TextBlock>
<Textblock> def </Textblock>
<Textblock> ghi </Textblock>
</Stackpanel>
Now on GUI i show all three textblock's text in single line like : abcdefghi . I want to update the partial text color (irrespective of which textblock the textbelong.
Say i want to change the color of 40% of total text to red and other as white. (also the percentage amount is too variable) It will update by Binding. So no hardcoding for text % and any specific textblock.
Done by -.How to make text color appear differently using 2 textblock for a single text
You can do this with one TextBlock, a LinearGradient and a few attached properties, as long as you don't mind letters being partially colored.
EDIT: I decided to write a post showing the solution with attached properties, but in the meanwhile you could use simple XAML and bindings like so:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="auto" />
<RowDefinition Height="auto" />
<RowDefinition />
</Grid.RowDefinitions>
<TextBlock FontSize="34" FontWeight="Bold"
Text="{Binding Value, ElementName=slider, StringFormat={}{0:p0} of this text is coloured}">
<TextBlock.Foreground>
<LinearGradientBrush EndPoint="1 0">
<GradientStop Color="BurlyWood" />
<GradientStop Color="BurlyWood" Offset="{Binding Value, ElementName=slider}" />
<GradientStop Color="Beige" Offset="{Binding Value, ElementName=slider}" />
<GradientStop Color="Beige" Offset="1" />
</LinearGradientBrush>
</TextBlock.Foreground>
</TextBlock>
<Slider x:Name="slider" Grid.Row="1" Minimum="0" Maximum="1" Value="0.4" />
</Grid>
And if you're interested by the solution using attached properties, you can visit Partially Coloured TextBlock on my blog.
I am developing a product scrolling feature where products info( product image, Name, price)will be shown side by side horizontally. i need to show the image of the product and also its reflection. under the reflected image i need to show the Prod Name and its price.
The problem here is i dont want to show the complete reflected image.
the oputput should be something like this
Image Height-100%
Reflected Image Height-20%
Product name
Product Price
The above pattern will repeat horizontally.
I am able to get the desired output with some problem. The reflected image is shown up with hieght 100% and the sapce between the actual image and product name is very high.
My reflected image should be a rotated image of the actual image and only half part of the actual image should be shown.
Sample Code so far..
<ListBox Name="testing" >
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<StackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
<ListBox.ItemTemplate >
<DataTemplate>
<StackPanel Orientation="Vertical" VerticalAlignment="Center" HorizontalAlignment="Center" >
<Image Source="{Binding ImageUrl}" Width="200"/>
<Image Source="{Binding ImageUrl}" Width="200" RenderTransformOrigin="0.5,0.5" Opacity="0.3">
<Image.RenderTransform>
<ScaleTransform ScaleY="-1" ScaleX="1"></ScaleTransform>
</Image.RenderTransform>
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0.5"/>
<GradientStop Color="#FFFFFFFF" Offset="1.0"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
<StackPanel Orientation="Vertical">
<TextBlock Text="{Binding Name}" HorizontalAlignment="Center" />
<TextBlock Text="{Binding Price}" HorizontalAlignment="Center"/>
</StackPanel>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Any pointers even is highly appreciated
For your scale transform, instead of -1, you may want to use a value like .2 since you want it to be 20% the height of the object.
As Jeff points out in order to compress the reflected image to 20% of the originals height you need a ScaleTransform with a ScaleY value of -0.2. The problem is that Render Transforms occur after the layout slot for the element as been allocated. Hence just setting you existing ScaleY value just leaves a 20% height image floating in middle of the same 100% space that the un-transformed image needs.
The Silverlight Toolkit LayoutTransformer control is designed to allow transforms to be applied to content before the layout slot for the control has been allocated. It can then inform its container of the actual space needed post transform.
With this control available change your second (reflected) image element to this:-
<toolkit:LayoutTransformer >
<toolkit:LayoutTransformer.LayoutTransform>
<ScaleTransform ScaleY="-0.2" ScaleX="1" />
</toolkit:LayoutTransformer.LayoutTransform>
<Image Source="Test.png" Width="200" Opacity="0.9">
<Image.OpacityMask>
<LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
<GradientStop Color="#00000000" Offset="0.1"/>
<GradientStop Color="#FFFFFFFF" Offset="1.0"/>
</LinearGradientBrush>
</Image.OpacityMask>
</Image>
</toolkit:LayoutTransformer>
I've tweaked some of the opacity values to make the effect more visible. Now the LayoutTransformer is performing the 20% scale and then reporting to the containing StackPanel the appropriately reduced height requirements.