How to create connection string in ASP.NET MVC application?

When we need to connect to the existing database, we need to edit the file Web.config and add the section <connectionStrings>.

To bind the Data context and Database, we use the <connectionString> section.
Inside this section, we write the connectionString attribute.

The value of this attribute can be taken by copying from the Data connection properties.

Go step by step:
Server Explorer > Data connection > BookContext > Properties > Connection String.

How to use Winforms control Chart?

In this article, I'll tell you how to create a graph in the Winforms control Chart.
Our steps will be such:

1. How to draw a linear graph?
2. How to add a legend to the graph?
3. How to scale the size of the graph (zoom)?

First you need to connect a library System.Windows.Forms.DataVisualization to work with Chart.

You also need to use namespace
using System.Windows.Forms.DataVisualization.Charting;

How to draw a linear graph?

chartTest.Dock = DockStyle.None;
            
chartTest.ChartAreas.Clear();
chartTest.Series.Clear();
chartTest.Legends.Clear();
chartTest.ChartAreas.Add("areaTest");
chartTest.ChartAreas["areaTest"].AxisX.MajorGrid.LineColor = Color.Black;
chartTest.ChartAreas["areaTest"].AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Solid;  
chartTest.ChartAreas["areaTest"].AxisY.MajorGrid.LineColor = Color.Black;
chartTest.ChartAreas["areaTest"].AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Solid;
chartTest.ChartAreas["areaTest"].BackColor = Color.White;

Color[] f_colour = new Color[] { Color.Green, Color.Red, Color.Blue, Color.Yellow, Color.YellowGreen, Color.HotPink };
int k = 0;

string f_nameSeries = "A1";
chartTest.Series.Add(f_nameSeries);
chartTest.Series[f_nameSeries].ChartArea = "areaTest";
chartTest.Series[f_nameSeries].Color = f_colour[k];
chartTest.Series[f_nameSeries].BorderWidth = 3;

for (int i = 0; i < 1000; i++)
{
    chartTest.Series[f_nameSeries].Points.AddXY(i, i);
}

How to add a legend to the graph?

chartTest.Series[f_nameSeries].ChartType = SeriesChartType.StepLine;
chartTest.Series[f_nameSeries].LegendText = "LegendText";
chartTest.Legends.Add(f_nameSeries);
chartTest.Legends[f_nameSeries].BorderColor = f_colour[k]; 

How to scale the size of the graph (zoom)?

Here we have 2 steps.

1. To create handler and allow series selection.

chartTest.MouseDown += new MouseEventHandler(clikOnGraf);

chartTest.ChartAreas["areaTest"].CursorX.IsUserSelectionEnabled = true;
chartTest.ChartAreas["areaTest"].CursorY.IsUserSelectionEnabled = true;

2. Write function that will reset zoom settings.

private void clikOnGraf(object sender, MouseEventArgs e)
{
    if (e.Button == System.Windows.Forms.MouseButtons.Right)
    {
        Chart f_ch = (Chart)sender;
        f_ch.ChartAreas["areaTest"].AxisX.ScaleView.ZoomReset();
        f_ch.ChartAreas["areaTest"].AxisY.ScaleView.ZoomReset();
    }
}

All program code:

private void Form1_Load(object sender, EventArgs e)
{
    chartTest.Dock = DockStyle.None;

    chartTest.ChartAreas.Clear();
    chartTest.Series.Clear();
    chartTest.Legends.Clear();
    chartTest.ChartAreas.Add("areaTest");
    chartTest.ChartAreas["areaTest"].AxisX.MajorGrid.LineColor = Color.Black;
    chartTest.ChartAreas["areaTest"].AxisX.MajorGrid.LineDashStyle = ChartDashStyle.Solid;
    chartTest.ChartAreas["areaTest"].AxisY.MajorGrid.LineColor = Color.Black;
    chartTest.ChartAreas["areaTest"].AxisY.MajorGrid.LineDashStyle = ChartDashStyle.Solid;
    chartTest.ChartAreas["areaTest"].BackColor = Color.White;

    Color[] f_colour = new Color[] { Color.Green, Color.Red, Color.Blue, Color.YellowGreen, Color.HotPink };
    int k = 0;

    string f_nameSeries = "A1";
    chartTest.Series.Add(f_nameSeries);
    chartTest.Series[f_nameSeries].ChartArea = "areaTest";
    chartTest.Series[f_nameSeries].Color = f_colour[k];
    chartTest.Series[f_nameSeries].BorderWidth = 3;

    for (int i = 0; i < 1000; i++)
    {
        chartTest.Series[f_nameSeries].Points.AddXY(i, i);
    }

    chartTest.Series[f_nameSeries].ChartType = SeriesChartType.StepLine;
    chartTest.Series[f_nameSeries].LegendText = "LegendText";
    chartTest.Legends.Add(f_nameSeries);
    chartTest.Legends[f_nameSeries].BorderColor = f_colour[k];

    chartTest.MouseDown += new MouseEventHandler(clikOnGraf);

    chartTest.ChartAreas["areaTest"].CursorX.IsUserSelectionEnabled = true;
    chartTest.ChartAreas["areaTest"].CursorY.IsUserSelectionEnabled = true;
}

private void clikOnGraf(object sender, MouseEventArgs e)
{
    if (e.Button == System.Windows.Forms.MouseButtons.Right)
    {
        Chart f_ch = (Chart)sender;
        f_ch.ChartAreas["areaTest"].AxisX.ScaleView.ZoomReset();
        f_ch.ChartAreas["areaTest"].AxisY.ScaleView.ZoomReset();
    }
}

WPF animated PopUp menu

In this tutorial, we'll talk about how to create an animated popup menu in WPF.

All the code we write in the XAML code and without using the codebehind. The external interface of the program is divided into several areas.
It will be the left part StackPanel, the central part Grid, the upper part StackPanel and the lower part Grid.
In the left part add four buttons. Also add animation DoubleAnimation that will work when you click on the button represented here.

In the bottom part we will place the Settings section.
When you start the program, the user can not see this section.It activates after pressing the button.

<Window x:Class="WpfApplication1.MainWindow"
        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"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="Main" Height="400" Width="600" WindowStartupLocation="CenterScreen">

    <Grid x:Name="grid1" Margin="0,0,0,0"
           Background="#7385E5">

        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <StackPanel  x:Name="stackPanel1"
                    Background="#7385E5" 
                    Margin="-100,0,0,0" Width="100"
                    HorizontalAlignment="Left">
            <StackPanel.RenderTransform>
                <TranslateTransform x:Name="trans__TransStackPanel" X="0" Y="0" />
            </StackPanel.RenderTransform>
            <Grid Height="80">
            </Grid>
            <Button 
                     Margin="-100,0,0,0" Height="40" 
                     Width="100" HorizontalAlignment="Left" 
                     Background="#64E895" 
                     FontFamily="Wingdings" 
                     FontSize="24"
                     Content="&#x3A;">
                <Button.RenderTransform>
                    <TranslateTransform x:Name="trans__TransformButton1" X="0" Y="0" />
                </Button.RenderTransform>
            </Button>
            <Button   
                     Margin="-100,0,0,0" Height="40" 
                     Width="100" HorizontalAlignment="Left"
                     Background="#64E895"
                     FontFamily="Wingdings" 
                     FontSize="24"
                     Content="&#x37;">
                <Button.RenderTransform>
                    <TranslateTransform x:Name="trans__TransformButton2" X="0" Y="0" />
                </Button.RenderTransform>
            </Button>
            <Button  
                     Margin="-100,0,0,0" Height="40" 
                     Width="100" HorizontalAlignment="Left"
                     Background="#64E895"
                     FontFamily="Wingdings" 
                     FontSize="24"
                     Content="&#x3C;">
                <Button.RenderTransform>
                    <TranslateTransform x:Name="trans__TransformButton3" X="0" Y="0" />
                </Button.RenderTransform>
            </Button>
            <Button  
                     Margin="-100,0,0,0" 
                     Height="40" Width="100"
                     HorizontalAlignment="Left"
                     Background="#64E895"
                     FontFamily="Wingdings" 
                     FontSize="24"
                     Content="&#x38;">
                <Button.RenderTransform>
                    <TranslateTransform x:Name="trans__TransformButton4" X="0" Y="0" />
                </Button.RenderTransform>
            </Button>
        </StackPanel>
        <Grid x:Name="grid2"
                    Background="#66BEE0" 
              Margin="0,0,0,0" >
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="60"/>
                <ColumnDefinition Width="Auto"/>
            </Grid.ColumnDefinitions>

            <Grid.RenderTransform>
                <TranslateTransform x:Name="trans__TransformGrid" X="0" Y="0" />
            </Grid.RenderTransform>

            <Button   
                Grid.Column="0" 
                Margin="10,10,0,0"
                Width="40" Height="40" 
                Panel.ZIndex="3"
                HorizontalContentAlignment="Center" 
                VerticalContentAlignment="Center"
                Padding="1,1,1,1" VerticalAlignment="Top"  
                Content="&#xDC;" 
                Background="{x:Null}"
                FontFamily="Wingdings"
                FontSize="30" 
                BorderBrush="{x:Null}"
                FontWeight="Bold" HorizontalAlignment="Left">

                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="trans__TransStackPanel"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5" />

                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid"
                                    Storyboard.TargetProperty="Y"
                                    From="0" To="45" 
                                    Duration="0:0:0.5" />

                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton1"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton2"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5"  BeginTime="0:0:0.1" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton3"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5"   BeginTime="0:0:0.2"/>
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton4"
                                    Storyboard.TargetProperty="X"
                                    From="0" To="100" 
                                    Duration="0:0:0.5"   BeginTime="0:0:0.3"/>

                                    <DoubleAnimation 
                                                    Storyboard.TargetName="stackPanel1"
                                                    Storyboard.TargetProperty="Opacity" 
                                                    From="0"  To="1"                                                   
                                                    Duration="0:0:1"></DoubleAnimation>

                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>

            <Button   
                Grid.Column="0"                
                Margin="10,50,0,0"
                Width="40" Height="40" Panel.ZIndex="3"
                HorizontalContentAlignment="Center" 
                VerticalContentAlignment="Center"
                Padding="1,1,1,1" VerticalAlignment="Top"  
                Content="&#x78;" 
                Background="{x:Null}"
                FontFamily="Wingdings"
                FontSize="30" 
                BorderBrush="{x:Null}"
                FontWeight="Bold" HorizontalAlignment="Left">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="trans__TransStackPanel"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5" />

                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid"
                                    Storyboard.TargetProperty="Y"
                                    From="45" To="0" 
                                    Duration="0:0:0.5" />

                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton1"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5" />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton2"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5"   />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton3"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5"  />
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformButton4"
                                    Storyboard.TargetProperty="X"
                                    From="100" To="0" 
                                    Duration="0:0:0.5"  />

                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>

        </Grid>
        <StackPanel Orientation="Horizontal" 
                    VerticalAlignment="Top" Height="50" 
                    HorizontalAlignment="Right" Margin="3,0" Panel.ZIndex="5">
            <Button Width="40" Height="40"
                    Margin="5,3,5,0" VerticalAlignment="Top"
                    HorizontalAlignment="Left" 
                    Content="&#xDD;" 
                    Background="{x:Null}"
                    FontFamily="Wingdings" 
                    FontSize="26" 
                    BorderBrush="{x:Null}">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid_"
                                    Storyboard.TargetProperty="Y"
                                    From="369" To="0" 
                                    Duration="0:0:0.2" />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>
            </Button>
            <Button Width="40" Height="40" 
                    Margin="5,3,5,0" VerticalAlignment="Top" 
                    HorizontalAlignment="Left"
                    Background="{x:Null}" 
                    Content="&#xDE;"                     
                    FontFamily="Wingdings" 
                    FontSize="26"
                    BorderBrush="{x:Null}">
                <Button.Triggers>
                    <EventTrigger RoutedEvent="Button.Click">
                        <EventTrigger.Actions>
                            <BeginStoryboard>
                                <Storyboard >
                                    <DoubleAnimation Storyboard.TargetName="trans__TransformGrid_"
                                    Storyboard.TargetProperty="Y"
                                    From="120" To="369"
                                    Duration="0:0:0.2"  />
                                </Storyboard>
                            </BeginStoryboard>
                        </EventTrigger.Actions>
                    </EventTrigger>
                </Button.Triggers>

            </Button>
        </StackPanel>
        <Grid x:Name="grid3"
              Margin="0,0,0,0" 
              Background="#64E895" >
            <Grid.RenderTransform>
                <TranslateTransform x:Name="trans__TransformGrid_" 
                                    X="0" Y="369" />
            </Grid.RenderTransform>
            <Label x:Name="label" Content="Settings" 
                   HorizontalAlignment="Left" 
                   Height="43" Margin="10,10,0,0" 
                   VerticalAlignment="Top" Width="100"
                   FontSize="22" FontWeight="Bold"/>
        </Grid>
    </Grid>

</Window>

WPF Сustom button with animation

In this example, we'll look how to create a WPF button with the animation effect when clicked on it.

We will write all the code in the XAML code. 

With this we use the Style object and place it in Window.Resources.

Create the Grid element and add 1 column and 1 row inside.
Then add the Grid.Background fill and use the RadialGradientBrush object to paint the area using a radial gradient.
To create this gradient, you need to add 3 GradientStop objects.
To the button, we will tie EventTrigger object RoutedEvent = "MouseDown" which will add an animation. 

We will use the DoubleAnimation object in which we will change the Background.RadiusX and Background.RadiusY property from 0 to 20.

Also, we can activate the function IsEnabled in the button.  

To do this, use Trigger Property = "IsEnabled" Value = "True".

 

<Window.Resources>
        <Style x:Key="mnuButtonStyle" TargetType="{x:Type Button}">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Button}">
                        <Grid x:Name="grid" Margin="0"
                                VerticalAlignment="Stretch"
                                HorizontalAlignment="Stretch"
                                Width="Auto" MinWidth="0" MinHeight="0"
                                MaxWidth="Infinity" 
                                ScrollViewer.HorizontalScrollBarVisibility="Auto" 
                                ScrollViewer.VerticalScrollBarVisibility="Auto" >
                            <Grid.Background>
                                <RadialGradientBrush RadiusX="0" RadiusY="0" GradientOrigin="0.5,0.5">
                                    <GradientStop x:Name="gradientStop0" Color="#FF1259D6" Offset="1" />
                                    <GradientStop x:Name="gradientStop1" Color="#FFA7D3EC" Offset="0.3" />
                                    <GradientStop x:Name="gradientStop2" Color="#FF1259D6" Offset="0" />
                                </RadialGradientBrush>
                            </Grid.Background>

                            <Grid.RowDefinitions>
                                <RowDefinition ></RowDefinition>
                            </Grid.RowDefinitions>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition  ></ColumnDefinition>
                            </Grid.ColumnDefinitions>

                            <Grid.Triggers>
                                <EventTrigger RoutedEvent="MouseDown">
                                    <BeginStoryboard>
                                        <Storyboard>
                                            <DoubleAnimation 
                                                Storyboard.TargetName="grid" 
                                                Storyboard.TargetProperty="Background.RadiusX"
                                                From="0" To="20" Duration="0:0:1.3" FillBehavior="Stop"/>
                                            <DoubleAnimation 
                                                Storyboard.TargetName="grid" 
                                                Storyboard.TargetProperty="Background.RadiusY"
                                                From="0" To="20" Duration="0:0:1.3"   FillBehavior="Stop" />
                                        </Storyboard>
                                    </BeginStoryboard>
                                </EventTrigger>
                            </Grid.Triggers>

                            <TextBlock x:Name="textBlock" 
                                       HorizontalAlignment="Center"
                                       Margin="0" TextWrapping="Wrap"
                                       Text="TextExample"
                                       VerticalAlignment="Center"/>
                        </Grid>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="True">
                                <Setter Property="IsEnabled" TargetName="grid" Value="True"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
            </Style.Triggers>
        </Style>
</Window.Resources>

In order to use this style we will tie it to the real buttons in the program.

<Grid>
        <Button x:Name="button" 
                HorizontalAlignment="Left"
                Height="95" Margin="76,39,0,0"
                VerticalAlignment="Top" Width="132" 
                Style="{DynamicResource mnuButtonStyle}"/>

        <Button x:Name="button1" 
                Height="95" Margin="309,39,76,0"
                VerticalAlignment="Top" 
                Style="{DynamicResource mnuButtonStyle}"/>

        <Button x:Name="button2" 
                HorizontalAlignment="Left"
                Height="95" Margin="191,0,0,52"
                VerticalAlignment="Bottom" Width="132" 
                Style="{DynamicResource mnuButtonStyle}"/>
</Grid>