I have the below code. I am trying to place the image directly to the right of the textblock within the border, but the image is almost touching the right side of the screen. How can I allign the image to the right of the textblock
<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
HorizontalAlignment="Stretch">
<DockPanel LastChildFill="False">
<TextBlock DockPanel.Dock="Left"
Style="{StaticResource HeaderTextBlockStyle}"
Text="Check new items"
VerticalAlignment="Center" Margin="2" />
<Image
DockPanel.Dock="Left"
VerticalAlignment="Center"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="HighQuality"
Source="/Media/pointer.png"
RenderTransformOrigin="0.95,4.046"
HorizontalAlignment="Center" Margin="0"
Height="25.306" Width="25.008>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="49.57"/>
<TranslateTransform X="-39.746" Y="-21.185"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</DockPanel>
</Border>
Try using the Grid control and define two columns into it
<Border BorderBrush="#FFD6D4D4" BorderThickness="0,0,0,1" Grid.Column="0" Grid.Row="1"
Height="28" VerticalAlignment="Top" Background="#FFF7F7F7"
HorizontalAlignment="Stretch">
<Grid>
<Grid.ColumnDefinitions>
<Column Definition Width="*"/>
<Column Definition Width="*"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Column="0" Style="{StaticResource HeaderTextBlockStyle}"
Text="Check new items"
VerticalAlignment="Center" Margin="2" />
<Image
Grid.Column="1" VerticalAlignment="Center"
SnapsToDevicePixels="True"
UseLayoutRounding="True"
RenderOptions.BitmapScalingMode="HighQuality"
Source="/Media/pointer.png"
RenderTransformOrigin="0.95,4.046"
HorizontalAlignment="Center" Margin="0"
Height="25.306" Width="25.008>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="49.57"/>
<TranslateTransform X="-39.746" Y="-21.185"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</Border>
Try using a StackPanel with Orientation set to horizontal instead of the dockpanel. That should put the image right next to the textblock.
if you still want to use the dock panel try setting the margin you want, on the image like margin="0,0,100,0"
Related
I am using VS2015 and currently I am under pressure of this issue and I don't know why it's not working on VS2015.
I do have a "Splash Screen" which is a welcome page and after that will be another page to show some other forms. I do have 5 borders represent as a container, each border will show after hit next and all of the borders are place only in the same View which is MainWindow.xaml.
Every field just like Name textbox field do have a Validation.ErrorTemplateand I am not sure if that will affect the textbox focus.
I used FocusManager.FocusedElement and text1.focus() but still not working and other solution coming from other people having similar issues but still not working in my end.
I am guessing something in logical focus but when I force to focus the textbox still not working.
Simple example of XAML.
<Border x:Name="Panel1" Opacity="0" IsHitTestVisible="False"
RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform />
<SkewTransform />
<RotateTransform />
<TranslateTransform Y="515" />
</TransformGroup>
</Border.RenderTransform>
<Grid Background="{DynamicResource ActiveBrush}">
<ScrollViewer Margin="0,10,0,76.33" Height="450" Width="630" VerticalAlignment="Top"
VerticalScrollBarVisibility="Auto"
Template="{DynamicResource ContentPanelScrollviewerStyle}">
<StackPanel Orientation="Vertical" Width="630">
<Label Content="Name" HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="{DynamicResource FieldGroupHeadingTextSize}"
Foreground="{DynamicResource TextBrush}" />
<Grid Height="170">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid Column="0" IsVisibleChanged="Grid_IsVisibleChanged">
<StackPanel>
<Label Content="Name"
HorizontalAlignment="Left"
VerticalAlignment="Top"
FontSize="{DynamicResource FieldLabelTextSize}"
Foreground="{DynamicResource TextBrush}" />
<TextBox Name="text1" Validation.ErrorTemplate="{StaticResource validationTemplate}"
HorizontalAlignment="Left" TextWrapping="Wrap"
Text="{Binding Name, NotifyOnValidationError=True}"
VerticalAlignment="Top" Width="298.8" Height="24"
FontSize="{DynamicResource FieldInputTextSize}"
Foreground="{DynamicResource TextBrush}">
<i:Interaction.Behaviors>
<behaviors:ReadOnlyWhileValidatingBehavior />
</i:Interaction.Behaviors>
</TextBox>
</StackPanel>
</Grid>
</Grid>
</StackPanel>
</ScrollViewer>
</Grid>
</Border>
I want to create TextBox with image in it. This is what I have tried:
<DockPanel Grid.Row="1" Grid.Column="1" Margin="5" >
<Image DockPanel.Dock="Left" Source="D:\my_backup\WPF\SALIENT\SALIENT\Images\d2.PNG" Width="20" Height="20"></Image>
<TextBox Text="test" FontSize="16" HorizontalAlignment="Stretch" Background="Transparent"
</TextBox>
</DockPanel>
this gives me output like this:
but i want the image inside TextBox like this
anyone can help?
You could use this sort of implementation.
you should probably make a user control out of it.
<Border BorderBrush="Black"
BorderThickness="2"
VerticalAlignment="Center"
CornerRadius="5">
<StackPanel Margin="5"
Orientation="Horizontal">
<Image Source="C:\SourceOfTheImage\Path\Image.png"
Height="18"/>
<TextBlock Text="Hello, I am a text block!"
Margin="3 0 0 0"/>
</StackPanel>
</Border>
It looks like this for me
You can set the background property on Textbox, like this (mine is align on right) :
<TextBox x:Name="txtSearch"
Text="Search Item...">
<TextBox.Background>
<ImageBrush ImageSource="Images/Search.png" Stretch="Uniform" AlignmentX="Right">
<ImageBrush.Transform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform X="-3"/>
</TransformGroup>
</ImageBrush.Transform>
</ImageBrush>
</TextBox.Background>
</TextBox>
Set AlignmentX to left if you want to see the image on the left side. Set the TranslateTransform.X to a positive value to add a margin.
Try this:
<Border Padding="5" BorderThickness="2,2,2,2" BorderBrush="Gray" CornerRadius="2,2,2,2">
<DockPanel Grid.Row="1" Grid.Column="1" Margin="5" >
<Image DockPanel.Dock="Left" Source="D:\my_backup\WPF\SALIENT\SALIENT\Images\d2.PNG" Width="20" Height="20"></Image>
<TextBox Text="test" FontSize="16" HorizontalAlignment="Stretch" Background="Transparent" BorderBrush="Transparent" ></TextBox>
</DockPanel>
</Border>
That would be the simplest one-off way of doing it.
You could dump it in a UserControl for reuse.
A second way of achieving this would be to open up the TextBox template and put this icon of yours inside the makeup of the TextBox, which would allow you to avoid needing the DockPanel and Border here, as well as allowing you to make the Template a resource you can easily attach to any Textbox in the future.
I'm relatively new to some of Xaml features..
I'm trying to implement this progressbar with an arrow on top that shows the progress indicator in addition to the filled bar. I used polygon to display the arrow and just need to translate it in X direction to display it on top of the progrssBar. However, the binding applied below .
Binding PlaybackProgressTip
which is a double is causing the code to crash. Can someone please tell me how to bind the TranslateTransform.X to the double value or I need to do something else?
<Grid x:Name="grid" VerticalAlignment="Top" Margin="0,34,0,0" Grid.Row="1" Height="18" d:LayoutOverrides="VerticalAlignment, Width, VerticalMargin">
<ProgressBar x:Name="Progress" Maximum="1" Value="{Binding PlaybackProgress}" VerticalAlignment="Center" Background="LightGray" Height="6" Visibility="Collapsed" IsIndeterminate="False" Foreground="DarkBlue"/>
<Image x:Name="ProgressComplete" Source="/Images/checkbox.png" Height="18" VerticalAlignment="Center" HorizontalAlignment="Center" Visibility="Collapsed" Stretch="Uniform"/>
<Polygon Points="0,0 8,0, 4,5" Stroke="Black" Fill="Black" Margin="0,-2,0,0">
<Polygon.RenderTransform>
<TransformGroup>
<TranslateTransform x:Name="ProgressPositionTranslate" X="{Binding RelativeSource={RelativeSource TemplatedParent}, Path=PlaybackProgressTip}" />
</TransformGroup>
</Polygon.RenderTransform>
</Polygon>
</Grid>
i am trying to make a ListBox that contains a string at right side of Item and one in left side i've tried this but those string become over each other.
<ListBox Name="ChaptersList" Height="200" Margin="10,10,10,0" VerticalAlignment="Top" SelectionChanged="ChaptersList_SelectionChanged" MouseDoubleClick="ChaptersList_MouseDoubleClick" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated">
<ListBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListBox.RenderTransform>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Label Content="{Binding Path=Title}" VerticalAlignment="Center" Margin="5"/>
<Label Content="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
(my first string should be multiline)
You can use Grid with two rows (where Height is set to Auto) and to text wrapping behaviour you must add ScrollViewer.HorizontalScrollBarVisibility="Disabled" property to ListBox.
<ListBox Name="ChaptersList"
Height="250" Margin="10,10,10,0" VerticalAlignment="Top" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated"
ScrollViewer.HorizontalScrollBarVisibility="Disabled"
>
<ListBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListBox.RenderTransform>
<ListBox.ItemTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="Auto" />
</Grid.RowDefinitions>
<TextBlock Grid.Row="0" Text="{Binding Path=Title}" TextWrapping="Wrap" HorizontalAlignment="Left" Margin="5"/>
<TextBlock Grid.Row="1" Text="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
</Grid>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
Use StackPanel:
<ListBox Name="ChaptersList" Height="200" Margin="10,10,10,0" VerticalAlignment="Top" SelectionChanged="ChaptersList_SelectionChanged" MouseDoubleClick="ChaptersList_MouseDoubleClick" RenderTransformOrigin="0.5,0.5" TextOptions.TextHintingMode="Animated">
<ListBox.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</ListBox.RenderTransform>
<ListBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Label Content="{Binding Path=Title}" VerticalAlignment="Center" Margin="5"/>
<Label Content="{Binding Path=Name}" HorizontalAlignment="Right" Margin="5"/>
</StackPanel>
</DataTemplate>
</ListBox.ItemTemplate>
</ListBox>
EDIT: i've found an easy solution: using Expression Blend end edit Template. it gives you a designer to adjust layouts.
I am trying to model the layout that is displayed in this image.
If you take a look, it has a number of textBoxes/checkboxes/buttons, a couple of diagonal controls, and another separate control (in a red outline).
The bottom screenshot shows what I would like to happen when a checkbox is checked in that separate control.
Any tips on how to lay this out and handle those diagonal portions? I tried just rotating textBlocks with borders but then the borders remain as rectangular, not cut off as in the image. I also had some trouble with getting them to position properly. I would also need the width of those diagonal sections to be bound somehow to the checkbox/textBox portion of that separate control in the red border.
Is my only choice to rotate borderless textBlocks and draw the lines myself using Paths and for the width expanding, bind it to some property of my separate control?
Thanks for any advice.
This looked like a fun challenge. Give the following XAML a try. It will automatically adjust the size of the columns as the content expands. The key is placing some canvas elements in a grid to allow the lines of the borders to flow into the adjacent cells. This could certainly be cleaned up with some styles and will be a little fragile if you need to tweak the sizes, but I think it demonstrates the approach:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Class="ButtonStyleTestApp.MainWindow"
x:Name="Window"
Title="MainWindow"
Width="640" Height="480">
<Grid x:Name="LayoutRoot" Background="#FF44494D" SnapsToDevicePixels="True">
<Grid.Resources>
<BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
</Grid.Resources>
<Grid Background="#DDD">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
<ColumnDefinition MinWidth="30" Width="Auto"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="60"/>
<RowDefinition Height="30"/>
</Grid.RowDefinitions>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="0" Grid.Row="1">
<TextBox Margin="10 5" VerticalAlignment="Center"/>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="1" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox1" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox1, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="2" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox2" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox2, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1 1 0 1" BorderBrush="#888" Grid.Column="3" Grid.Row="1">
<StackPanel Orientation="Horizontal" VerticalAlignment="Center">
<CheckBox x:Name="CheckBox3" Margin="5" VerticalAlignment="Center"></CheckBox>
<TextBox Visibility="{Binding IsChecked, ElementName=CheckBox3, Converter={StaticResource BooleanToVisibilityConverter}}" Width="100" Margin="5" VerticalAlignment="Center"/>
</StackPanel>
</Border>
<Border BorderThickness="1" BorderBrush="#888" Grid.Column="4" Grid.Row="1">
<Button Margin="3" FontSize="10" VerticalAlignment="Center" Width="40">Click</Button>
</Border>
<Canvas Grid.Column="1">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#888"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 1
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="2">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 2
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="3">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock VerticalAlignment="Center" TextAlignment="Left" Margin="21 1 1 1" FontSize="11">
Testing 3
</TextBlock>
</Border>
</Grid>
</Canvas>
<Canvas Grid.Column="4">
<Grid ClipToBounds="False" Canvas.Top="30">
<Border
BorderBrush="#666"
BorderThickness="0 1 0 0"
RenderTransformOrigin="0 0"
Height="20"
Width="100"
Margin="0 0 0 -80">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="-45"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
</Border>
</Grid>
</Canvas>
</Grid>
</Grid>
</Window>
I hope it helps.
It's definitely doable with borders and textblocks but it's tedious.
you'd have to play with negative margins a lot.
You could work it out with images instead of borders but you still need the textblocks on an angle using rendertransform
I'd definitely approach it using a Grid with a lot of columns of width Auto, place the easy components first then the tricky ones and do the rotations + neg margins last.
HTH.
As far as handling the diagonal elements goes, try putting the TextBlock within a Border, and transforming the border with a RotateTransform and SkewTransform. This should get you started:
<Grid HorizontalAlignment="Left" Height="100" Margin="64,60.5,0,0" VerticalAlignment="Top" Width="100" Background="Blue">
<Border BorderBrush="Black" BorderThickness="1" Margin="20,25.5,20.5,41.5" RenderTransformOrigin="0.5,0.5">
<Border.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform AngleY="20"/>
<RotateTransform Angle="90"/>
<TranslateTransform/>
</TransformGroup>
</Border.RenderTransform>
<TextBlock TextWrapping="Wrap" Text="TextBlock" RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform Angle="180"/>
<TranslateTransform/>
</TransformGroup>
</TextBlock.RenderTransform>
</TextBlock>
</Border>
</Grid>