i want to draw/add an image as a part of text in textbox in windows phone 7. I m not using Expression blend.
So where i can find the drawing objects as well as paint events in silverlight?
You can apply a background image to a lot of Silverlight elements with the following:
<TextBox x:Name="SearchBox" Text="Search" Height="70" Width="390">
<TextBox.Background>
<ImageBrush ImageSource="Images/MagnifyingGlass.png" Stretch="UniformToFill" />
</TextBox.Background>
</TextBox>
There is no way to add an image as part of a TextBox. Although I'm not entirely sure what you want to achieve.
Do you really mean TextBox? If so, the only option will be to restyle it so it have the image included as well.
Do you mean TextBlock? If so, and you're trying to include an image part way through a piece of text, you can wrap the image and the text either side of it in a WrapPanel.
You might want to override the template in order to define your own template. You can do this in the style:
<Style x:Key="textboxImage" TargetType="TextBox">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="TextBox">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="ApplicationIcon.png" />
</Grid.Background>
<ContentControl x:Name="ContentElement" Foreground="{TemplateBinding Foreground}" Margin="{TemplateBinding Margin}" Padding="{TemplateBinding Padding}" VerticalContentAlignment="Stretch"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
You just need to set the style of your textbox to StaticResources textboxImage.
I just tested and it works fine.
Related
the wpf extended toolkit has a BusyIndicator control and its possible to apply a template to the progress bar contained in that control.
i'm want the progress bar to be like the ring progress bar in win 8 (like here in code project http://www.codeproject.com/Articles/700185/Windows-Progress-Ring) but i can't apply a control, just a DataTemplate.
any ideas?
The BusyIndicator is designed as a content control. meaning it wraps the content you put inside and ads an overlay to it. you can create a ControlTemplate for it but you will have to make it something like this:
<Style TargetType="{x:Type xctk:BusyIndicator}" x:Key="ProgressRing">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type xctk:BusyIndicator}">
<Grid>
<ContentControl Content="{TemplateBinding Content}"></ContentControl>
<Border HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
x:Name="Overlay" Visibility="{TemplateBinding IsBusy, Converter={StaticResource BoolToVis}}">
<Border.Background>
<SolidColorBrush Color="Black" Opacity="0.5"></SolidColorBrush>
</Border.Background>
<TextBlock HorizontalAlignment="Center" VerticalAlignment="Center">progress</TextBlock>
</Border>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This is similar to how the BusyIndicator is built but allows you to replace the progress bar it uses. simply replace the
BTW for the progress ring you can use an imageview and simply rotate it around it self infinitely.
For the life of me I cant seem to figure out this simple task of setting the ContentControl's background color:
<ContentControl x:Name="Content03"
Width="130"
Height="130"
Canvas.Top="50"
Canvas.Left="400"
Background="Yellow">
<Ellipse Fill="YellowGreen" IsHitTestVisible="True">
</Ellipse>
</ContentControl>
Also tried doing this using styles but still doesnt work ;(
A ContentControl has no visual prescence in itself, but is a container for a child control. Setting some properties on this control (like fontsize etc) is usually only a way of having those properties propagate down the visual tree, so they van be picked up by child controls (those that support it).
The best thing to do is this:
<ContentControl x:Name="Content03"
Width="130"
Height="130"
Canvas.Top="50"
Canvas.Left="400">
<Grid Background="Yellow">
<Ellipse Fill="YellowGreen" IsHitTestVisible="True">
</Ellipse>
</Grid>
</ContentControl>
If you don't have to stick with ContentControl I suggest using Border instead.
When I've had the same problem, Border had the same Child property that I needed to only have one child and to easily switch it via code with a different object. Border uses Properties like Background correctly. Those Properties also work, if Child is null.
<Border x:Name = "Content03"
Width = "130"
Height = "130"
Canvas.Top = "50"
Canvas.Left = "400"
Background = "Yellow">
<Ellipse
Fill = "YellowGreen"
IsHitTestVisible = "True">
</Ellipse>
</Border>
I know this is old but you could also change the template of the ContentControl in the style. That can be overkill for some things, but in this case it's really just wrapping a ContentPresenter in a Border and some template binding:
<Style TargetType="ContentControl" x:Key="StPortal">
<Setter Property="Background" Value="White" />
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="ContentControl">
<Border Background="{TemplateBinding Background}" BorderBrush="{TemplateBinding BorderBrush}"
BorderThickness="{TemplateBinding BorderThickness}">
<ContentPresenter />
</Border>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
This gives you the ability to set background, etc. properties that borders have, AND gives the ability to set things like font family and size that ContentControl has and Border doesn't...
Based on the following code :
<GroupBox>
<GroupBox.Template>
<ControlTemplate TargetType="{x:Type GroupBox}">
<ContentPresenter TextElement.FontSize="28" />
</ControlTemplate>
</GroupBox.Template>
<TextBlock>Test</TextBlock>
</GroupBox>
I was expecting "Test" to be displayed with FontSize=28. But it uses the default size instead.
If I remove the TextBlock like this :
<GroupBox>
<GroupBox.Template>
<ControlTemplate TargetType="{x:Type GroupBox}">
<ContentPresenter TextElement.FontSize="28" />
</ControlTemplate>
</GroupBox.Template>
Test
</GroupBox>
The text is now the displayed with 28 as FontSize.
Shouldn't the property value be inherited when I use a TextBlock ?
This other question How do I Change the FontFamily on a ContentPresenter? doesn't help, as it works only for default content too.
This question also : How do I Change the FontFamily on a ContentPresenter?.
Both works whe you use the default content handler, but fails when you manually create a textblock.
Edit: As demonstrated in this other question, I've tried by simply using a ContentControl :
<StackPanel>
<StackPanel.Resources>
<ControlTemplate x:Key="UsingBorderTemplate" TargetType="{x:Type ContentControl}">
<Border BorderBrush="Red" BorderThickness="1" TextElement.FontFamily="Courier New" Margin="5">
<ContentPresenter/>
</Border>
</ControlTemplate>
<ControlTemplate x:Key="MyTemplate" TargetType="{x:Type ContentControl}">
<ContentPresenter TextElement.FontFamily="Courier New" Margin="5" />
</ControlTemplate>
</StackPanel.Resources>
<ContentControl Template="{StaticResource MyTemplate}">
I'm courier new!
</ContentControl>
<ContentControl Template="{StaticResource MyTemplate}">
<TextBlock>I'm default!</TextBlock>
</ContentControl>
</StackPanel>
You can change the template from "MyTemplate" to "UsingBorderTemplate" with the same result.
I had an odd problem with ContentPresenter. I remember that I have analyzed the source of the problem and have found out that it was by design - Probably you have here the same issue.
Look at this post, maybe it helps you.
I think the text that the content presenter is presenting is the GroupBox.Header, and you may just be tacking another TextBox in there that isn't part of the Group Box.
In your first code block, add the line below and see if that works:
<GroupBox.Header>Test</GroupBox.Header>
HTH,
Berryl
I am using WPF with a style sheet. In my Style, I have been trying to customized the look of the dotted focus border for a CheckBox. I need the focus border to only draw around the square an not the entire control.
I set my style width to 15 and the dotted border is correct, but does not surround the square, its off to the side.
I have included the style.
thanks for the help.
Style Sheet fragment:
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle StrokeThickness="1" Stroke="Black" StrokeDashArray="1 2" SnapsToDevicePixels="true" Width="15"/>
</ControlTemplate>
</Setter.Value>
</Setter>
Didn't change much but I think it looks ok
<Style x:Key="MyFocusVisual">
<Setter Property="Control.Template">
<Setter.Value>
<ControlTemplate>
<Rectangle StrokeThickness="1" Margin="-1,1,-1,1" Stroke="Black" HorizontalAlignment="Left" StrokeDashArray="1 2" SnapsToDevicePixels="true" Width="15"/>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
<Canvas>
<CheckBox Canvas.Left="100" Canvas.Top="100" TabIndex="0" Content="Content1" FocusVisualStyle="{DynamicResource MyFocusVisual}"/>
<CheckBox Canvas.Left="100" Canvas.Top="120" TabIndex="1" Content="Content2" FocusVisualStyle="{DynamicResource MyFocusVisual}"/>
</Canvas>
Use Blend or XAMLWriter using one the the techniques shown here to get the ControlTemplate of a CheckBox.
Look at how and where the "square" is defined - I am sure that you will see that it has a margin and/or padding and/or other formatting applied to it.
At that point, you can use that information to implement your Style. It's unclear from your snippet if you are actually implementing the ControlTemplate of the CheckBox, but that may be easiest.
Oh, and FYI - in WPF, they are called ResourceDictionaries, not style sheets.
Please bear with me Silverlight Designer Gurus, this is compicated (to me).
I'm creating a custom control which derives form the Silverlight 3.0 ListBox. In an effort not to show tons of code (initially), let me describe the setup.
I have a class library containing a class for my control logic. Then I have a Themes/generic.xaml that holds the styling details. In generic.xaml, I have a style that defines the default layout and look for the ListBox where I'm setting a values for the Template, ItemsPanel and ItemTemplate.
In my test app, I add my control on to MainPage.xaml and run it and it works great. I dynamically bind data to my control and that works fine.
Now I want to set the ItemContainerStyle for my derived control. If I create a style in the MainPage.xaml file and set the ItemContainerStyle property to that control as in:
<dti:myControl x:Name="MyControl1" ItemContainerStyle="{StaticResource MyListBoxItem}"
Height="500"
Width="200"
Margin="10"
Background="AliceBlue"
/>
It works as expected.
However, I'd like to do this in the class library or, more specifically, in generic.xaml. I tried to this Setter to my current Style:
<Setter Property="ItemContainerStyle">
<Setter.Value>
<ControlTemplate>
<Grid Background="Red" Margin="3">
<ContentPresenter x:Name="contentPresenter"
ContentTemplate="{TemplateBinding ContentTemplate}"
HorizontalAlignment="Stretch" Margin="3"/>
</Grid>
</ControlTemplate>
</Setter.Value>
</Setter>
And it fails miserably with:
"System.ArgumentException: 'System.Windows.Controls.ControlTemplate' is not a valid value for property 'ItemContainerStyle'."
Note: This is not my actual style I'd like to use for ItemContainerStyle. I'm actually looking to plug in some VSM here for the various selected/unselected states of the a ListBoxItem (for a dynamically bound control).
So, to the question is how do I apply the ItemContainterStyle to my custom control when it's defined using generic.xaml? I do not want that property set when I actually use the control later on.
Thanks,
Beaudetious
You missed to put Style tag inside your Setter.Value. ItemContainerstyle explects a Style to ListBoxItem(Unless you subclassed ListBoxItem to your own derived version.)
<Setter Property="ItemContainerStyle">
<Setter.Value>
<Style TargetType=”{x:Type ListBoxItem}“ >
<Setter Property="Template">
<Setter.Value>
<ControlTemplate>
<Grid Background="Red" Margin="3">
<ContentPresenter x:Name="contentPresenter" ContentTemplate="{TemplateBinding ContentTemplate}" HorizontalAlignment="Stretch" Margin="3"/>
</Grid>
</ControlTemplate>
<Setter.Value>
</Style>
</Setter.Value>