Help me Convert this WPF to Silverlight

C

complete

Weaksauce
Joined
Aug 30, 2005
Messages
92
Help me Convert this WPF to Silverlight

I am interested in a Charles Petzold C# example that shows how to do a fisheye effect ( http://www.charlespetzold.com/blog/2009/05/Realizing-a-Fisheye-Effect-in-Silverlight.html ). The XAML code samples are in WPF but I want to try this in Silverlight.

When I try to create the XAML code in Silverlight, the compiler complains in two locations:

<Style TargetType="{x:Type Button}">
Error 1 The type 'x:Type' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.

<Style.Triggers>
Error 2 The attachable property 'Triggers' was not found in type 'Style'.

How do I convert this to Silverlight?
 
That is in Silverlight...

You're missing the xmlns reference. Look at his StackPanels. They have 'xmlns:x'. Your style is trying look inside a referenced assembly 'x'
 
I got it working but I ran into a problem when I am trying to manipulate the default size of the controls.

How do you set a default size of a control that you can resize?

I have been looking at a code sample from Charles Petzold.

It is from here:

http://www.charlespetzold.com/blog/2009/05/Realizing-a-Fisheye-Effect-in-Silverlight.html
it uses mouse over methods to increase the size of button classes.

I have it working but I want to make some modifications. I want the starting size of the button to be larger. I do not know how much of the code I need to post here to make the issue clear enough. The XAML for the page describes a "FisheyeButton" that is described in a seperate xaml file. Something like this:

Code: 
<StackPanel x:Name="LayoutRoot" Width="1017" Orientation="Horizontal" Height="253">   
    <src:FisheyeButton Style="{StaticResource btnStyle}" ButtonContent="Button No. 1" />   
</StackPanel>


The functionality of the project is such that if I give the Fisheyebutton a width and height a set size at this loction, the effect where the size of the control the effect of becoming larger does not happen. In other words, if I write in the <src:FisheyeButton... tag above Width="100", then the button does not behave at run time as it should.

In the same page.xaml file, the btnStyle is defined like this:


Code: 
<UserControl.Resources >
   <Style x:Key="btnStyle" TargetType="src:FisheyeButton">
      <Setter Property="VerticalAlignment" Value ="Center" />
      <Setter Property="HorizontalAlignment" Value ="Center" />
      <Setter Property="FontSize" Value ="12" />
   </Style >
</UserControl.Resources >

I wonder if perhaps at this point, I can add a "Setter" property to define a default starting widh and height for the class.
 
I do not see anything in the style that is adjusting the size, perhaps he is handling the event manually and doing it or you didn't post the entire resource.

Typically, to affect the size of a generic button with a style you'd have to apply a scale transform to it. I don't see any scale transform built into that static resource you pasted. If he were adjusting the size to a fixed value instead of using a transform that could be a problem
 
ok I skimmed through the article.. it is quite long... but from what I could tell it looked like he is adjusting the font size and not scaling the entire control. Perhaps he is relying on it to autosize with the font. If that's the case, fixing the width would break the functionality. I'd look into using a scaletransform instead.
 
anyway I have expression blend on this machine.. I quickly (and I'm no expert at this) told it to scale a button on mouse over and exported the style.. it came out looking like so..

Code: 
<Style x:Key="ButtonStyle5" TargetType="{x:Type Button}">
			<Setter Property="Template">
				<Setter.Value>
					<ControlTemplate TargetType="{x:Type Button}">
						<Grid x:Name="grid" RenderTransformOrigin="0.5,0.5">
							<Grid.RenderTransform>
								<TransformGroup>
									<ScaleTransform/>
									<SkewTransform/>
									<RotateTransform/>
									<TranslateTransform/>
								</TransformGroup>
							</Grid.RenderTransform>
							<VisualStateManager.VisualStateGroups>
								<VisualStateGroup x:Name="CommonStates">
									<VisualStateGroup.Transitions>
										<VisualTransition GeneratedDuration="0:0:1" To="MouseOver">
											<VisualTransition.GeneratedEasingFunction>
												<CubicEase EasingMode="EaseInOut"/>
											</VisualTransition.GeneratedEasingFunction>
										</VisualTransition>
										<VisualTransition From="MouseOver" GeneratedDuration="0:0:1">
											<VisualTransition.GeneratedEasingFunction>
												<CubicEase EasingMode="EaseInOut"/>
											</VisualTransition.GeneratedEasingFunction>
										</VisualTransition>
									</VisualStateGroup.Transitions>
									<VisualState x:Name="Normal"/>
									<VisualState x:Name="MouseOver">
										<Storyboard>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="grid">
												<EasingDoubleKeyFrame KeyTime="0" Value="-2"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)" Storyboard.TargetName="grid">
												<EasingDoubleKeyFrame KeyTime="0" Value="1.2"/>
											</DoubleAnimationUsingKeyFrames>
											<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)" Storyboard.TargetName="grid">
												<EasingDoubleKeyFrame KeyTime="0" Value="1.2"/>
											</DoubleAnimationUsingKeyFrames>
										</Storyboard>
									</VisualState>
									<VisualState x:Name="Pressed"/>
									<VisualState x:Name="Disabled"/>
								</VisualStateGroup>
							</VisualStateManager.VisualStateGroups>
							<Rectangle Fill="#FFF4F4F5" Stroke="Black"/>
							<ContentPresenter HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
						</Grid>
						<ControlTemplate.Triggers>
							<Trigger Property="IsFocused" Value="True"/>
							<Trigger Property="IsDefaulted" Value="True"/>
							<Trigger Property="IsMouseOver" Value="True"/>
							<Trigger Property="IsPressed" Value="True"/>
							<Trigger Property="IsEnabled" Value="False"/>
						</ControlTemplate.Triggers>
					</ControlTemplate>
				</Setter.Value>
			</Setter>
		</Style>
 
You must log in or register to reply here.
Back
Top