Introduction
This article explains the FrameworkElement class. This class is a base class that is inherited by all of the layout controls and other WPF Controls. FrameworkElement provides functionality related to the logical tree, styling, data binding and lifetime events.
Solution
In this article we will look at a method and an event provided by the FrameworkElement class. The method can be used against controls positioned within a scrollable area, such as a ScrollViewer. When you execute it, it attempts to scroll that area to make the control wholly or partially visible. This is very useful when you have a large number of controls, some of which may be outside of the visible area of a ScrollViewer and you wish to show the user a specific item. The event is related to the method.
Background
The basic version of the BringIntoView method has no parameters. When executed against a control, the layout system attempts to make the control visible. This only works if the control is positioned within a scrollable area that is currently able to be scrolled. On execution, the logical tree is examined to find a suitable scrollable area that houses the control. This area is then scrolled just enough to show the entire child control. If the control is already completely in the view then the method has no effect.
Procedure
Step 1
First we will create a XAML window, then make three buttons for the Top, Middle, and Bottom.
<Window x:Class="FrameworkElementVisibilityDemo.MainWindow"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Title="FrameworkElement Demo"
Width="250"
Height="200">
<DockPanel>
<StackPanel DockPanel.Dock="Top" Orientation="Horizontal">
<Button Click="Top_Click" Width="70">Top</Button>
<Button Click="Middle_Click" Width="70">Middle</Button>
<Button Click="Bottom_Click" Width="70">Bottom</Button>
</StackPanel>
<ScrollViewer>
<StackPanel Margin="0 30 0 0">
<Border Name="Top"
BorderBrush="Red"
BorderThickness="5"
Height="100"
RequestBringIntoView="Border_RequestBringIntoView">
<Label HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Top"/>
</Border>
<Border Name="Middle"
BorderBrush="Orange"
BorderThickness="5"
Height="100"
RequestBringIntoView="Border_RequestBringIntoView">
<Label HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Middle"/>
</Border>
<Border Name="Bottom"
BorderBrush="Green"
BorderThickness="5"
Height="100"
RequestBringIntoView="Border_RequestBringIntoView">
<Label HorizontalAlignment="Center"
VerticalAlignment="Center"
Content="Bottom"/>
</Border>
</StackPanel>
</ScrollViewer>
</DockPanel>
</Window>
Step 2
First we will create a class. On clicking of the top button, the Top_Click event will be generated under which the Top.BringIntoView() method will be called for which the background is set to the color yellow. Similarly, on clicking the Middle Button, the Middle_click event will be generated and under that the Middle.BrightIntoView() method will be called. On the clicking of the Bottom Button, the Bottom_Click event is generated under which the Bottom.BringIntoView method is generated.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace FrameworkElementVisibilityDemo
{
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
}
private void Top_Click(object sender, RoutedEventArgs e)
{
Top.BringIntoView();
}
private void Middle_Click(object sender, RoutedEventArgs e)
{
Middle.BringIntoView();
}
private void Bottom_Click(object sender, RoutedEventArgs e)
{
Bottom.BringIntoView();
}
Step 3
We will need to declare a Request method under which the BringIntoView method for setting of various backgrounds is declared with parameters, namely "top, (Border) sender" for the setting of various colors for various backgrounds that will only be set upon the clicking of various buttons.
private void Border_RequestBringIntoView(object sender, RequestBringIntoViewEventArgs e)
{
SetBackgroundForBringIntoView(Top, (Border)sender);
SetBackgroundForBringIntoView(Middle, (Border)sender);
SetBackgroundForBringIntoView(Bottom, (Border)sender);
}
Step 4
Target and Sender are references of the Border class that are parameters for the SetBackgroundForBringIntoView() method.
private void SetBackgroundForBringIntoView(Border target, Border sender)
{
target.Background = target == sender
? new SolidColorBrush(Colors.Yellow)
: new SolidColorBrush(Colors.White);
}
}
}
Output
Here is the sequence of outputs that you will get after running your application.
1.
2. On the clicking of the onTop button, the color of the top border is set to yellow.
3. Similarly, on the clicking of the middle button, the middle border is set to yellow.
5.