I want to remove the border of image which is displayed when i click on it .
**<Image x:Name="ImagePresenter" Source="{StaticResource IconDocument}" />**
<Rectangle x:Name="focusElement" Opacity="0" Stroke="{StaticResource color_506_brush}" StrokeThickness="1" IsHitTestVisible="False" RadiusX="4" RadiusY="4"/>
</Grid>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
Adding an image to a Silverlight UserControl results in just the image with no border displaying for me.
Xaml:
<Image x:Name="ImageText" Source="TestImage.png"/>
I assume that isn't going to help you. Could you give a bit more detail in your question and see if I can find a better answer?
Your question is not quite clear to me as silverlight doesnt add any border to image unless something in your code tells it to.
Try setting StrokeThickness to zero. (If required modify the template to set the strokethickness to zero).
Hope this helps
Yes you all were right by default the image doesn't have border. As i had two columns in my defined style it was creating two rectangles for each(one for my textblock another for image).To get rid of this I used one column defination and it worked. :)
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Image x:Name="ImagePresenter" Grid.Column="0" Source="{StaticResource IconDocument}" Width="15" HorizontalAlignment="Left"/>
<TextBlock x:Name="TextPresenter" Grid.Column="0" Text="{Binding DocumentName}" Style="{StaticResource DocumentViewerOutputTextItem}" Margin="15 4 4 0"
Visibility="{Binding IsSelected, Converter={StaticResource InvertVisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<TextBlock Grid.Column="0" Text="{Binding DocumentName}" Style="{StaticResource DocumentViewerOutputTextItem_MouseOver}" Margin="15 4 4 0"
Visibility="{Binding IsSelected, Converter={StaticResource VisibilityConverter}, RelativeSource={RelativeSource TemplatedParent}}"/>
<Rectangle x:Name="focusElement" Opacity="0" Stroke="{StaticResource color_506_brush}" StrokeThickness="1" IsHitTestVisible="False" RadiusX="4" RadiusY="4"/>
</Grid>
</Grid>
</ControlTemplate>
Related
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 have looked at many questions/answers but couldn't find what I was exactly looking for,
I am trying to change the background colour of the expander's header only and not have the same colour continue for the content within the expander. Preferably within xaml but a vb.net solution would suffice.
(Any comments or suggestions will be helpful)
If this is a duplicated question please direct me to the answer and leave the question open to help others avoid the same issue in the future!
Thanks.
I am not sure whether this is what you are exactly looking for, but you could change the header background by simply doing that:
<Expander VerticalAlignment="Center">
<Expander.Header>
<Grid Background="LightBlue">
<TextBlock Text="Expander Header"/>
</Grid>
</Expander.Header>
<StackPanel>
<TextBlock Text="Cotent"></TextBlock>
</StackPanel>
</Expander>
Or you could override the default Expander's Header DataTemplate by using HeaderTemplate
<Window.Resources>
<DataTemplate x:Key="HeaderText">
<Border Height="25" Background="LightBlue">
<TextBlock Text="{Binding}"
Margin="4 0"
VerticalAlignment="Center"
Foreground="White"
FontSize="11"
FontWeight="Normal"
/>
</Border>
</DataTemplate>
<Style TargetType="{x:Type Expander}">
<Setter Property="HeaderTemplate" Value="{StaticResource HeaderText}"/>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Expander VerticalAlignment="Center" Header="Expander Header">
<StackPanel>
<TextBlock Text="Cotent"></TextBlock>
</StackPanel>
</Expander>
</Grid>
I had a lot of problems with getting the header background set.
I found the easiets weay to do it was to simply make a coloured rectangle and put it behind the expander. (use Margin and Height to make it fit)
<Rectangle Grid.Row="1" Grid.Column="0" Fill="LightBlue" Height="33" Margin="0,0,0,-35" />
or use a border if you want rounded corners:
<Border CornerRadius="15" Height="33" Margin="0,0,0,-35" Background="LightBlue" />
I'm using the following DataTemplate
<DataTemplate x:Key="platform_resources">
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentControl DataContext="{Binding}" Focusable="False" Content="{DynamicResource appbar_server}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<Viewbox Width="30" Height="30" ToolTip="Logical Network Count" Stretch="Uniform">
<ContentControl Focusable="False" Content="{DynamicResource appbar_network_server_connecting}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=vlan_count}"/>
<Separator Style="{StaticResource {x:Static ToolBar.SeparatorStyleKey}}" />
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentControl Focusable="False" Content="{DynamicResource appbar_network}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=networkdomain_count}"/>
</StackPanel>
</DataTemplate>
The template displays all the relevant data with separators but only shows the images on the last record. It's leaves spaces where the images are supposed to be, but no images.
Make sure you add x:Shared="False" property to your resources.
Example:
<Canvas x:Key="appbar_server" x:Shared="False">
<!-- ... -->
</Canvas>
This happens because you probably defined some Images (e.g appbar_server) in your resources and trying to display them in multiple items. But Image is a Visual and in WPF each Visual can only have one parent. So when your items are being generated, each item steals the Image from the previous one until the last item finally gets it.
Solution:
Unlike Image, BitmapImage is not a Visual and thus can be set multiple times as the source of different items. So instead of defining Images in your Resources, define BitmapImages:
<Window.Resources>
<BitmapImage x:Key="appbar_server" UriSource="C:\...\appbar_server.png"/>
....
And then instead of ContentControls create Image instances in your DataTemplate to present them:
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<Image Focusable="False" Source="{DynamicResource appbar_server}" />
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
...
*Update:
The image is captured in a canvas which seems to be needing some
special wrapper to make this work.
In that case, you should define a DataTemplate for each Canvas like this:
<Window.Resources>
<DataTemplate x:Key="appbar_3d_3ds">
<Canvas Width="76" Height="76" Clip="F1 M 0,0L 76,0L 76,76L 0,76L 0,0">
<Path Width="32" Height="40" Canvas.Left="23" Canvas.Top="18" Stretch="Fill" Fill="Black" Data="F1 M 27,18L 23,26L 33,30L 24,38L 33,46L 23,50L 27,58L 45,58L 55,38L 45,18L 27,18 Z "/>
</Canvas>
</DataTemplate>
....
And then create ContentPresenter Instances in your ItemTemplate with their ContentTemplate set to your pre-defined data templates (e.g. appbar_3d_3ds).
<DataTemplate>
<StackPanel Orientation="Horizontal">
<Viewbox Width="30" Height="30" ToolTip="Network Domain Count" Stretch="Uniform">
<ContentPresenter ContentTemplate="{DynamicResource appbar_3d_3ds}"/>
</Viewbox>
<TextBlock Margin="0,7,0,0" Text="{Binding Path=workload_count}"/>
....
I have a button using the ControlTemplate below.
<ControlTemplate x:Key="ControlTemplate" TargetType="{x:Type Button}">
<Grid>
<Path x:Name="ButtonPath" Fill="{Binding IsSelected, Converter={StaticResource ArrowBackgroundColorConverter}, UpdateSourceTrigger=PropertyChanged}"
Data="{Binding Converter={StaticResource ArrowPathSelector}}" Stretch="UniformToFill" Margin="0 0 -35 0"></Path>
<TextBlock Grid.Column="0" Grid.Row="0" FontFamily="{StaticResource ApplicationFont}" FontSize="{StaticResource Heading3}" HorizontalAlignment="Center" Margin="35 0 0 0" VerticalAlignment="Center" Text="{Binding Title}" Foreground="White"/>
</Grid>
</ControlTemplate>
but when I click the Button in my app it is not outlining the Path but instead the original Button.
I cant quite figure out how to get the button to reflect the Path itself. Any help is greatly appreciated, Thanks!
If you want to change the shape of the focus rectangle (the dotted border indicating keyboard focus), you need to create a custom FocusVisualStyle that draws a dotted path in the same shape as your button content:
<Style x:Key="ButtonFocusRectangle" TargetType="Control">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Path Stroke="Black"
StrokeDashArray="2 2"
Data="M 0,0 50,50 100,0 Z"
Stretch="UniformToFill"
Margin="0 0 -35 0" />
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
Then, on the button, set FocusVisualStyle="{StaticResource ButtonFocusRectangle}". Note that it would probably be cleaner to define a custom Style for the button, and have it apply both the Template and FocusVisualStyle for you.
Alternatively, you can just get rid of the focus visual entirely by setting FocusVisualStyle="{x:Null}". You might opt to do this, and simply draw a focus hint in your regular Template by, for example, changing the path's stroke with an IsKeyboardFocused trigger.
As an aside, you probably want to set Stretch to Uniform on the paths in both templates. UniformToFill can cause clipping.
Have you tried putting your Path and your textblock the other way around:
<ControlTemplate x:Key="ControlTemplate" TargetType="{x:Type Button}">
<Grid>
<TextBlock Grid.Column="0" Grid.Row="0" FontFamily="{StaticResource ApplicationFont}" FontSize="{StaticResource Heading3}" HorizontalAlignment="Center" Margin="35 0 0 0" VerticalAlignment="Center" Text="{Binding Title}" Foreground="White"/>
<Path x:Name="ButtonPath" Fill="{Binding IsSelected, Converter={StaticResource ArrowBackgroundColorConverter}, UpdateSourceTrigger=PropertyChanged}"
Data="{Binding Converter={StaticResource ArrowPathSelector}}" Stretch="UniformToFill" Margin="0 0 -35 0"></Path>
</Grid>
</ControlTemplate>
I've been trying (failing) to create a button template, to be shared between libraries. The template is (currently) basically a bordered circle inside a bordered circle. In order to make the inner border's size smaller than the outer, I use a Converter on the binding. I'd like to pass in a property of the TemplatedParent as a ConverterParameter but it just doesn't work, apparently by design. The bit that doesn't work is because I'm trying to bind a ConveterParameter to a TemplatedParent property.
Here's my Style def (in a ResourceDictionary):
<SolidColorBrush x:Key="MyBorderFillColour">Yellow</SolidColorBrush>
<SolidColorBrush x:Key="MyBorderEdgeColour">#ff652f00</SolidColorBrush>
<SolidColorBrush x:Key="MyGeneralFillColour">#ffffffbd</SolidColorBrush>
<s:Int32 x:Key="MyBorderThickness">10</s:Int32>
<l:RelativeSizeConverter x:Key="RelativeSizeConverter" />
<Style x:Key="MyButtonStyle" TargetType="Button">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Ellipse
Fill="{StaticResource MyBorderFillColour}"
StrokeThickness="2"
Stroke="{StaticResource MyBorderEdgeColour}"
Height="{TemplateBinding Height}"
Width="{TemplateBinding Width}" />
<Ellipse StrokeThickness="2"
Stroke="{StaticResource MyBorderEdgeColour}"
Fill="{StaticResource MyGeneralFillColour}"
Height="{Binding Path=Height,
RelativeSource={RelativeSource TemplatedParent},
Converter={StaticResource RelativeSizeConverter},
ConverterParameter={StaticResource MyBorderThickness}}"
Width="{Binding Path=Width,
RelativeSource={RelativeSource TemplatedParent},
Converter={StaticResource RelativeSizeConverter},
ConverterParameter={TemplateBinding BorderThickness}}" />
<TextBlock
Text="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black"
FontFamily="Calibri"
FontWeight="Bold"
FontSize="17" />
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
The second Ellipse's Height works using a StaticResource, but Width doesn't work using the TemplateBinding approach. I've also tried
ConverterParameter={Binding Path=BorderThickness,RelativeSource={RelativeSource TemplatedParent}}
Any idea how to achieve my aim?!?
Thanks for any help,
This does not work because in order to provide a binding expression for a value, the value must be a dependency property. ConverterParameter is not a dependency property so you cannot bind its value.
How about using a slightly less generic approach, where you create a few slightly more specific value converters. You can then use a 'dot' path, so that your Button is passed as the value to the converter, you can then access teh width, border width etc... directly.
Width="{Binding Path=.,
RelativeSource={RelativeSource TemplatedParent},
Converter={StaticResource RelativeWidthWidthBorderSizeConverter}}"
You don't need to do anything so fancy here; the layout system will handle it for you (using the Margin property and the stretching behavior of the Ellipse in a container):
<Grid Height="{TemplateBinding Height}" Width="{TemplateBinding Width}">
<Ellipse
Fill="{StaticResource MyBorderFillColour}"
StrokeThickness="2"
Stroke="{StaticResource MyBorderEdgeColour}"/>
<Ellipse StrokeThickness="2" Margin="4"
Stroke="{StaticResource MyBorderEdgeColour}"
Fill="{StaticResource MyGeneralFillColour}"/>
<TextBlock
Text="{TemplateBinding Content}"
HorizontalAlignment="Center"
VerticalAlignment="Center"
Foreground="Black"
FontFamily="Calibri"
FontWeight="Bold"
FontSize="17" />
</Grid>
Note also that you should use a ContentPresenter for the Content instead of a TextBlock for more flexibility; this currently fails the Button contract if the user of the templated button supplies more complex Content.