my code in xml is self explanatory to the seniors in uwp
Unsccestful search of several hours in inet
and very few and complex (beyond my need) animation/layout/components found
its a simple qwestion but i am to totally unable to seize this problem
tried and so but no way to get the thing working
<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" Width="800" Height="800" >
<Page.Resources>
<LinearGradientBrush x:Key="mibrush">
<GradientStop Color="Red" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
<LinearGradientBrush x:Key="btnbrush">
<GradientStop Color="Yellow" Offset="0"/>
<GradientStop Color="Orange" Offset="1"/>
</LinearGradientBrush>
</Page.Resources>
<Grid Background="{StaticResource mibrush}" BorderThickness="10">
<Button x:Name="miboton" Content="Button" Click="Button_Click" Height="150"
Margin="444,598,0,0" Width="200">
<Button.Resources>
<Storyboard x:Key="buttonAnimation" x:Name="buttonAnimation">
<DoubleAnimation Storyboard.TargetName="miButton"
Storyboard.TargetProperty="(Canvas.Left)" To="200" Duration="0:0:5" AutoReverse="True"
/>
</Storyboard>
</Button.Resources>
</Button>
</Grid>
</Page>
now my cs part of the mainpage
namespace App3{
public sealed partial class MainPage : Page
{
public MainPage()
{
this.InitializeComponent();
}
private void Button_Click(object sender, RoutedEventArgs args)
{
buttonAnimation.Begin();
}
}
}
crash componets with not installed exception.i can do keyframes animation,an other ones
but the book treats this chapters as standalone not telling me where to start a how to start animations .
In fact i have to idea how to treat event simplest tiggers of animations.Pls some patience with me im nooby in this language.
You need to check the TargetName and Button Name.
These two should be the same.
<Button x:Name="miboton"
<DoubleAnimation Storyboard.TargetName="miButton"
Related
I just tried Template10 RingSegment, and it worked with a new blank app.
<Page
x:Class="RingSegmentExample.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:RingSegmentExample"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="using:Template10.Controls"
mc:Ignorable="d">
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="White" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<RelativePanel>
<controls:RingSegment
x:Name="MyRing" Radius="150" InnerRadius="100" StartAngle="-90" EndAngle="90"
>
<controls:RingSegment.Fill>
<LinearGradientBrush EndPoint="1,1" StartPoint="0,1">
<GradientStop Color="#FF727272"/>
<GradientStop Color="Yellow" Offset="0.238"/>
<GradientStop Color="Lime" Offset="0.59"/>
<GradientStop Color="Red" Offset="1"/>
</LinearGradientBrush>
</controls:RingSegment.Fill>
</controls:RingSegment>
<Ellipse Width="25" Height="25" RelativePanel.AlignHorizontalCenterWith="MyRing" RelativePanel.AlignVerticalCenterWith="MyRing" Fill="SteelBlue"/>
</RelativePanel>
</Grid>
This was my blank app's code. This is working fine. I installed Template10 and Template10-validation the same way to my existing project with NuGet. In my existing project, even if i only add this to the page:
xmlns:controls="using:Template10.Controls"
And this with a RelativePanel in the same spot in the XAML:
<controls:RingSegment x:Name="MyRing" Radius="150" InnerRadius="100" StartAngle="-90" EndAngle="90" />
I cannot even see anything about the RingSegment in the designer, and the app is crashing at startup at this line:
this.InitializeComponent();
I did everything in the same way like in the blank app. I even tried to replace my MainPage.xaml to the working one and the problem is still the same. It doesnt show any problem in the code, and i cant see the RingSegment in the designer.
Do you have any idea about this problem? I could not find anything about this.
EDIT:
This is the error when i run it:
Exception thrown: 'System.TypeInitializationException' in mscorlib.ni.dll
Exception thrown: 'System.TypeInitializationException' in Template10Library.dll
'CustomSerialDeviceAccess.exe' (CoreCLR: CoreCLR_UWP_Domain): Loaded 'C:\Users\Readdeo\Documents\Visual Studio 2015\Projects\Samples\AACustomSerialDeviceAccess\cs\bin\x64\Debug\AppX\System.Resources.ResourceManager.dll'. Module was built without symbols.
Exception thrown: 'Windows.UI.Xaml.Markup.XamlParseException' in CustomSerialDeviceAccess.exe
Im new to this so maybe its a very simple thing that might be wrong...
I try to use a style ResourceDictionary but when I try to use it in my application it doesn't work.
This is the directory:
<ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<LinearGradientBrush x:Key ="DarkBackground" StartPoint ="0,0" EndPoint =" 1,1">
<GradientStop Offset="0" Color =" #FF333344"></GradientStop>
<GradientStop Offset="1" Color =" #FF666677"></GradientStop>
</LinearGradientBrush>
<LinearGradientBrush x:Key="StandardBackground" EndPoint="0,1" StartPoint="0,0">
<GradientStop Color="#FFF3F3F3" Offset="0"/>
<GradientStop Color="#FFEBEBEB" Offset="0.5"/>
<GradientStop Color="#FFDDDDDD" Offset="0.5"/>
<GradientStop Color="#FFBBBBBB" Offset="1"/>
</LinearGradientBrush>
The Application.xaml looks like that:
<Application x:Class="MyApplication.App"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
StartupUri="\src\GUI\MainWindow.xaml">
<Application.Resources>
<ResourceDictionary Source ="StyleTemplates.xaml"> </ResourceDictionary>
</Application.Resources>
</Application>
Entrys in the MainWindow:
<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
In my MainWindow I want to do something like:
<TabItem Header="Project config" Background="{StaticResource StandardBackground}" Margin="-2,-2,2,0" IsEnabled="{Binding ToolPreference.ProjectLoaded}">
What do I have to do next to get the styles as static recources in my MainWindow.xaml and also in all other availabe windows?
In my MainWindow.xaml I can now see the "StandardBackground" when I try this:
<TabItem Header="Project config" Background="{StaticResource x:StandardBackground}" Margin="-2,-2,2,0" IsEnabled="{Binding ToolPreference.ProjectLoaded}">
When I add the "x:" I get a dropdown with StandardBackground and DarkBackground. But the I get the error:(translated from german to english) "The resource: x:StandardBackground could not be resolved"
There's nothing wrong with your XAML. I suspect your StandardBackground and DarkBackground resources would work fine on other controls. Your issue in this case is that the Background property of a TabItem has no effect. You need to look into styling the TabControl to achieve the look you want.
To verify that your styles are at least accessible, you could try the following XAML change:
<TabItem>
<TabItem.Header>
<TextBox Text="Project config" Background="{StaticResource StandardBackground}" />
</TabItem.Header>
</TabItem>
Try
<Application.Resources>
<ResourceDictionary>
<ResourceDictionary.MergedDictionaries>
<ResourceDictionary Source ="StyleTemplates.xaml"> </ResourceDictionary>
</ResourceDictionary.MergedDictionaries>
</ResourceDictionary>
</Application.Resources>
I use this code to animate an Image from left to right
but I want To="100" to window width
how to change DoubleAnimation "To" when window load or resize ?
xaml :
<Window x:Class="WpfApplication1.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="MainWindow" Height="350" Width="525" ResizeMode="CanResize" WindowState="Normal" WindowStyle="ToolWindow" Loaded="Window_Loaded">
<Window.Resources>
<Storyboard x:Key="PlayAnimation" Storyboard.TargetProperty="(Canvas.Left)">
<DoubleAnimation From="0" Duration="0:0:1" RepeatBehavior="Forever" To="100" />
</Storyboard>
</Window.Resources>
<Grid>
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="White" Offset="1" />
<GradientStop Color="#FF5AC0FF" Offset="0" />
</LinearGradientBrush>
</Grid.Background>
<Canvas>
<Image Cursor="Hand" Height="205" HorizontalAlignment="Left" Margin="74,78,0,0" Name="image2" Source="I:\a.png" Stretch="Fill" VerticalAlignment="Top" Width="200" />
</Canvas>
</Grid>
</Window>
C# code :
private void Window_Loaded(object sender, RoutedEventArgs e)
{
Storyboard sb = this.FindResource("PlayAnimation") as Storyboard;
Storyboard.SetTarget(sb, this.image2);
sb.Begin();
}
If I understand your question correctly, you want to change the To to some different value in codebehind, something like this:
Storyboard sb = this.FindResource("PlayAnimation") as Storyboard;
(sb.Children[0] as DoubleAnimation).To = 200;
Storyboard.SetTarget(sb, this.image2);
sb.Begin();
I have a window, in which a have a rectangle. I want its fill to be a gradientstop for another rectangle fill, but on different window. The "source" window is defined as:
<Window x:Class="WPF1.ColorSelectorWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:my="clr-namespace:WPF1"
x:Name="colorSelectorWindow"
Title="ColorSelectorWindow" Height="281" Width="540">
There's a rectangle
<Rectangle HorizontalAlignment="Left" Margin="40,120,0,41" Stroke="Black" Width="100" Name="ColorPicker">
<Rectangle.Fill>
<SolidColorBrush>
<SolidColorBrush.Color>
...
</SolidColorBrush.Color>
</SolidColorBrush>
</Rectangle.Fill>
</Rectangle>
and a property:
public partial class ColorSelectorWindow : Window
{
public Brush SelectedBrush
{
get
{
return ColorPicker.Fill;
}
}
}
Now, in the target window, I define a rectangle:
<Rectangle Height="213" HorizontalAlignment="Left" Margin="27,8,0,0" Name="rectangle1" VerticalAlignment="Top" Width="25" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="{Binding ElementName=colorWindowSelector, Path=SelectedBrush, Converter={StaticResource BrushToColorConverter}}" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
where BrushToColorConverter converts Brush to Color. This isn't working and I don't know why, it seems I have a problem with addressing that "source" window.. I'm building it in the target window constructor:
public MainWindow()
{
colorWindow = new ColorSelectorWindow();
colorWindow.Name = "colorWindowSelector";
colorWindow.Hide();
InitializeComponent();
}
I'm only hiding and showing it, not closing for sure. How to bind it properly?
You need to have property exposed SelectedBrush on your MainWindow and you just need to bind to the color of this Brush using RelativeSource. So, this will do for you -
<Rectangle Height="213" HorizontalAlignment="Left" Margin="27,8,0,0" Name="rectangle1" VerticalAlignment="Top" Width="25" Grid.Row="1">
<Rectangle.Fill>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Offset="0" Color="Blue" />
<GradientStop Offset="1" Color="{Binding Path=Owner.SelectedBrush, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType =Window} Converter={StaticResource BrushToColorConverter}}" />
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
But make sure while creating the window, you set its owner to be MainWindow -
public MainWindow()
{
InitializeComponent();
colorWindow = new ColorSelectorWindow();
colorWindow.Name = "colorWindowSelector";
colorWindow.Owner = this;
colorWindow.Hide();
}
I have a Silverlight 3 image rotator that displays approx.7 images. You can rotate it back and forth, and it will make the left or right image the selected image. The rotator is using jpg images that resides in an image folder. I would like to dynamically load image strings from the database, since I have hundreds of images available. My question is: How can I load a list or collection based on a query, convert the image strings into Pictures and load them into the rotator dynamically. here is what I have now.
XAML
<UserControl
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
xmlns:CollectionFlow="clr-namespace:CollectionFlow;assembly=CollectionFlow"
x:Class="CollectionFlowSample.MainPage"
d:DesignWidth="640" d:DesignHeight="480" Loaded="UserControl_Loaded" Width="900" Height="800">
<UserControl.Resources>
<DataTemplate x:Key="DataTemplate1">
<Grid RenderTransformOrigin="0.5,0.5">
<Grid.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform Y="100"/>
</TransformGroup>
</Grid.RenderTransform>
<Grid.RowDefinitions>
<RowDefinition/>
<RowDefinition Height="5"/>
<RowDefinition/>
</Grid.RowDefinitions>
<Border Height="180"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="140" BorderThickness="10" Margin="16,14,0,0"
CornerRadius="2">
<Border.BorderBrush>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="Black" Offset="0"/>
<GradientStop Color="#FF282323" Offset="1"/>
<GradientStop Color="#FF413636" Offset="0.556"/>
<GradientStop Color="#FFCEBABA" Offset="0.83"/>
</LinearGradientBrush>
</Border.BorderBrush>
<Image Source="{Binding Mode=OneWay}" Stretch="Fill" >
<Image.Effect>
<DropShadowEffect ShadowDepth="0" BlurRadius="3" Opacity="0.5"/>
</Image.Effect>
</Image>
</Border>
<Image Source="{Binding Mode=OneWay}" Grid.Row="2" RenderTransformOrigin="0.5,0.5">
<Image.Effect>
<BlurEffect/>
</Image.Effect>
<Image.OpacityMask>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Offset="0.5"/>
<GradientStop Offset="1" Color="#7F000000"/>
</LinearGradientBrush>
</Image.OpacityMask>
<Image.RenderTransform>
<TransformGroup>
<ScaleTransform ScaleY="-1"/>
<SkewTransform AngleX="0" AngleY="0"/>
<RotateTransform Angle="0"/>
<TranslateTransform/>
</TransformGroup>
</Image.RenderTransform>
</Image>
</Grid>
</DataTemplate>
<ItemsPanelTemplate x:Key="ItemsPanelTemplate1">
<CollectionFlow:CollectionFlowPanel ItemHeight="400" ItemWidth="160" FocusedItemOffset="60" UnfocusedItemOffset="40" ItemVisibility="5" RenderTransformOrigin="0.5,0.5"/>
</ItemsPanelTemplate>
</UserControl.Resources>
<Grid x:Name="LayoutRoot">
<Grid.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFA0A0A0" Offset="0"/>
<GradientStop Color="Black" Offset="1"/>
</LinearGradientBrush>
</Grid.Background>
<CollectionFlow:CollectionFlow x:Name="ImageList" ItemTemplate="{StaticResource DataTemplate1}" ItemsPanel="{StaticResource ItemsPanelTemplate1}">
<CollectionFlow:CollectionFlow.Background>
<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
<GradientStop Color="#FFEAE2E2"/>
<GradientStop Color="#FF0E0101" Offset="1"/>
<GradientStop Color="#FF676464" Offset="0.665"/>
</LinearGradientBrush>
</CollectionFlow:CollectionFlow.Background>
</CollectionFlow:CollectionFlow>
C# code
ImageList.ItemsSource = new string[] {"SampleImages/10019436.jpg","SampleImages/10042172.jpg" etc...
Here is what like to do.....
Query Database get records back and then...
use the conversion function process...
string sPic = (string)emps.Photo.ToString();
EmpPic1.Source = ConvertBase64ToImage(sPic);
public BitmapImage ConvertBase64ToImage(string base64String)
{
//Convert Base64 String to byte[]
byte[] imageBytes = Convert.FromBase64String(base64String);
BitmapImage bi = new BitmapImage();
bi.SetSource(new MemoryStream(imageBytes));
return bi;
}
This is where I like to add the queried images to a collection,and use the technique described above to dispaly them in the image rotator.
Any help would be appreciated.
you need to request data using a web server (through a web service call is a good way of achieving this) this will return the data to your silverlight application, you wont be able to connect to a database directly with silverlight, your service will access the database and it can then return the data to your application to be consumed by the code you discussed above.
Create a web service that returns the image data
add a web reference to your silverlight application that points to your service
use the generated proxy to call the service and return the data to your application
- you could either use the serviceclient of the proxy with an asynchronous call back or forget the proxy and just call the service using webclient
i think its important to understand the client based nature of silverlight, it lives in a sandbox on a remote computer in its most typical use case, so accessing data doesnt use the same approach as say a windows forms application>