469,356 Members | 2,043 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,356 developers. It's quick & easy.

How to change shape of thumb to ellips in wpf

I'm writing a windows app in WPF and want to change the shape of a thumb to
an ellipse. Is this possible? also, the edges of the thumb are beveled.
Is it possible to change this to a flat look and if so, how?

Here's how I'm creating my thumb so far.
Expand|Select|Wrap|Line Numbers
  1. cornerThumb = new Thumb();
  2. // Set some arbitrary visual characteristics.
  3. cornerThumb.Cursor = customizedCursor;
  4. cornerThumb.Height = cornerThumb.Width = 10;
  5. cornerThumb.Opacity = 0.40;
  6. cornerThumb.Background = new SolidColorBrush(Colors.MediumBlue);
Thanks for any input.
--
Jan 9 '07 #1
6 20411
You'll probably get better help in the Avalon newsgroup (or the MSDN
Forums), but yes, it's possible. It's easier to represent in XAML, but what
you want to do is override the visual template with your new visual:

Expand|Select|Wrap|Line Numbers
  1. <Thumb Height="10" Width="10" Opacity=".4" Background="MediumBlue">
  2. <Thumb.Style>
  3. <Style TargetType={x:Type Thumb}>
  4. <Style.Setters>
  5. <Setter Property="Template">
  6. <Setter.Value>
  7. <ControlTemplate TargetType="{x:Type Thumb}">
  8. <Ellipse.../>
  9. </ControlTemplate>
  10. </Setter.Value>
  11. </Setter>
  12. </Style.Setters>
  13. </Style>
  14. </Thumb.Style>
  15. <Thumb.Cursor>
  16. </Thumb.Cursor>
  17. </Thumb>
Jan 9 '07 #2
Thanks Keith. I hope you don't mind that I revised your code a little as
follows:

Expand|Select|Wrap|Line Numbers
  1. <Window x:Class="WindowsApplication1.Window1"
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4. Title="WindowsApplication1" Height="300" Width="300"[quote]
  5.  
  6. <Thumb Height="10" Width="10" Opacity=".4" Background="MediumBlue">
  7. <Thumb.Style>
  8. <Style TargetType="{x:Type Thumb}">
  9. <Setter Property="Template">
  10. <Setter.Value>
  11. <ControlTemplate TargetType="{x:Type Thumb}">
  12. <Ellipse Width="10" Height="5" Stroke="Blue"
  13. StrokeThickness="2"></Ellipse>
  14. </ControlTemplate>
  15. </Setter.Value>
  16. </Setter>
  17. </Style>
  18. </Thumb.Style>
  19. </Thumb>
  20. </Window>
#Styling and Templating
http://msdn2.microsoft.com/en-us/library/ms745683.aspx
Regards,
Walter Wang (wa****@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.
Jan 9 '07 #3
Walter,

This was a good start, but I need to do everything via c# and not xaml. the
link you provided also helped me in that direction, but its still not
working yet. I have a sample with 1 window and 1 button and a resource file
for the thumb's style. Here's the resorce xaml:
Expand|Select|Wrap|Line Numbers
  1. <ResourceDictionary
  2. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  3. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  4.         
  5.                 >
  6.  
  7. <Style BasedOn="{StaticResource {x:Type TextBlock}}" TargetType="Thumb"
  8. x:Key="TestRoundThumb" <Setter Property="Template">
  9. <Setter.Value>
  10. <ControlTemplate TargetType="{x:Type Thumb}">
  11. <Ellipse Width="20" Height="15" Stroke="Blue"
  12. StrokeThickness="2"></Ellipse>
  13. </ControlTemplate>
  14. </Setter.Value>
  15. </Setter>
  16. </Style>
  17. </ResourceDictionary>
and here's the code in the button click event:
Expand|Select|Wrap|Line Numbers
  1. private void RoundThumb(object sender, RoutedEventArgs e)
  2. {
  3. Thumb roundThumb = new Thumb();
  4. roundThumb.Height = 15;
  5. roundThumb.Width = 20;
  6. roundThumb.Style = (Style)(this.Resources["TestRoundThumb"]);
  7. myGrid.Children.Add(roundThumb);
  8. }

"Walter Wang [MSFT]" <wa****@online.microsoft.comwrote in message
news:KZ****************@TK2MSFTNGHUB02.phx.gbl...
Thanks Keith. I hope you don't mind that I revised your code a little as
follows:

<Window x:Class="WindowsApplication1.Window1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="WindowsApplication1" Height="300" Width="300"
>

<Thumb Height="10" Width="10" Opacity=".4" Background="MediumBlue">
<Thumb.Style>
<Style TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse Width="10" Height="5" Stroke="Blue"
StrokeThickness="2"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Thumb.Style>
</Thumb>
</Window>

#Styling and Templating
http://msdn2.microsoft.com/en-us/library/ms745683.aspx
Regards,
Walter Wang (wa****@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no
rights.
Jan 10 '07 #4
As you may already have known, you could still define the style (template)
in XAML. Then you could use FindResource (method of FrameworkElement) to
load the resource and apply it to the Thumb object that you've created
using code:

<Grid Name="grid1">
<Grid.Resources>
<Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse Width="10" Height="5" Stroke="Blue" Fill="Blue"
StrokeThickness="2"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Thumb Name="thumb1" Height="10" Width="10" Opacity=".4"
Background="MediumBlue">
</Thumb>
</Grid>
Code:

thumb1.Style = (Style) grid1.FindResource("ThumbStyle");

Hope this helps.
Regards,
Walter Wang (wa****@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

Jan 12 '07 #5
Thanks Walter that did it. In my case I added the style to a resource file.
In order to refrence the style from c#, I had to add a reference to the file
in the window's xaml like this:

<Window.Resources>
<ResourceDictionary Source="Dictionary1.xaml" />
</Window.Resources>

Here's the style in Dictionary1.xaml:

<Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse Width="15" Height="15" Stroke="DarkSlateGray"
StrokeThickness="0.5">
<Ellipse.Fill >
<SolidColorBrush Color="DarkBlue" Opacity="0.2"></SolidColorBrush>
</Ellipse.Fill>
<Ellipse.BitmapEffect>
<DropShadowBitmapEffect Color="Black" Direction="320"
ShadowDepth="5" Softness="0.5" Opacity="0.2" />
</Ellipse.BitmapEffect>
</Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>

and here's the c# that used it:

Thumb tb = new Thumb();
Canvas.SetLeft(tb, 100);
Canvas.SetTop(tb, 100);
myCanvas.Children.Add(tb);
tb.Style = (Style)this.FindResource("ThumbStyle");
"Walter Wang [MSFT]" <wa****@online.microsoft.comwrote in message
news:a4****************@TK2MSFTNGHUB02.phx.gbl...
As you may already have known, you could still define the style (template)
in XAML. Then you could use FindResource (method of FrameworkElement) to
load the resource and apply it to the Thumb object that you've created
using code:

<Grid Name="grid1">
<Grid.Resources>
<Style x:Key="ThumbStyle" TargetType="{x:Type Thumb}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Thumb}">
<Ellipse Width="10" Height="5" Stroke="Blue" Fill="Blue"
StrokeThickness="2"></Ellipse>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>
<Thumb Name="thumb1" Height="10" Width="10" Opacity=".4"
Background="MediumBlue">
</Thumb>
</Grid>
Code:

thumb1.Style = (Style) grid1.FindResource("ThumbStyle");

Hope this helps.
Regards,
Walter Wang (wa****@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no
rights.

Jan 18 '07 #6
Hi moondaddy,

You probably have seen my reply in your another post regarding this
FindResource question. Anyway, I'm including the reply here again for your
reference:

-----------

When finding a resource, it first checks the current element's Resources
collection (its resource dictionary). If the item is not found, it checks
the parent element, its parent, and so on until it reaches the root
element. At that point, it checks the Resources collection on the
Application object. If it is not found there, it finally checks a system
collection (which contains system-defined fonts, colors, and other
settings). If the item is in none of these collections, it throws an
InvalidOperationException.

Therefore you could simply put resources in App.xaml within
<Application.Resourcesand those resources will be shared by all your code
in the same assembly.

For ResourceDictionary defined in separate .xaml files, you could use
following code to load it:

ResourceDictionary rd = new ResourceDictionary();
rd.Source = new Uri(@"Dictionary1.xaml", UriKind.Relative);

Then you can use rd["resource_key"] to reference each resource.
-------------

Hope this helps.

Regards,
Walter Wang (wa****@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

Jan 19 '07 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

8 posts views Thread by S.W. Rasmussen | last post: by
2 posts views Thread by PA | last post: by
reply views Thread by minjie | last post: by
8 posts views Thread by Boni | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.