I am trying to accomplish a navigation bar and a content screen in .NetFramework WPF application. My goal is to implement MVVM pattern. The main objective is when I hit Users button in navigation bar, I want my Body page to render "Users" text. And when I press Actions button, body page must render "Actions" text. Navigation buttons are "Users" and "Actions". I have 3 View pages that are OperationPage, Navbar and Body. OperationPage is using Navbar and Body XAML to create view. The grid code is as following :
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20*" />
<RowDefinition Height="80*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<local:Navbar/>
</Grid>
<Grid Grid.Row="1">
<local:Body/>
</Grid>
</Grid>
Navbar grid is as follows :
<UserControl.DataContext>
<vm:NavbarViewModel/>
</UserControl.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="50*" />
<RowDefinition Height="25*" />
<RowDefinition Height="25*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<TextBlock Text="{Binding Path=CurrentPage}" FontSize="30"/>
</Grid>
<Grid Grid.Row="1">
<Button Content="Users" Width="75"/>
</Grid>
<Grid Grid.Row="2">
<Button Content="Actions" Width="75"/>
</Grid>
</Grid>
And Finally Body grid is as following :
<Grid>
<TextBlock Text="{Binding Path=CurrentPage}" FontSize="30"></TextBlock>
</Grid>
I have created a ViewModel classes for both Navigation and Body that implements INotifyPropertyChanged. I can change the text from these classes. One of them is as following for navigation bar.
class NavbarViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
private void NotifyChange(string changedVar) => PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(changedVar));
private string _currentPage = "Navbar Data";
public string CurrentPage
{
get { return _currentPage; }
set
{
_currentPage = value;
NotifyChange("CurrentPage");
}
}
}
But I am stuck with connecting these two classes to a Singleton ViewState class. Should I again implement two-way binding with INotifyPropertyChanged to my model class or Should I follow another way? I tried implementing the INotifyPropertyChanged class again in my Model class but I could'not find a way to create connection between the ViewModel class and model.
You might solve this in a couple of ways.
The first way is to strongly-couple your ViewModels, like this.
OperationPage View
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20*" />
<RowDefinition Height="80*" />
</Grid.RowDefinitions>
<Grid Grid.Row="0">
<local:Navbar DataContext="{Binding NavbarViewModel}"/>
</Grid>
<Grid Grid.Row="1">
<local:Body DataContext="{Binding BodyViewModel}"/>
</Grid>
</Grid>
Then implements the OperationPageViewModel. This ViewModel should implement the INotifyPropertyChanged interface and it must have the 2 properties named NavbarViewModel and BodyViewModel of types NavbarViewModel and BodyViewModel respectively.
You might need to add to NavbarViewModel 2 events binded to Users' button clicked and Groups' button clicked in order to expose them outside and OperationPageViewModel should monitor those events (it has the instance of NavbarViewModel) then for example set CurrentPage property of BodyViewModel accordingly on user's button click.
Another solution might be to decouple ViewModels.
This solution get you better code maintenance and also let you code less than the first solution.
You need to use Message Broker design pattern https://en.wikipedia.org/wiki/Message_broker
you can implement your own Message Broker or simply use one of any MVVM Toolkit libraries that already implement it.
Most of the existing MVVM Toolkits have their own Message Broker implementation.
So no need to re-invent the whell.
For example, the MVVM Light Toolkit Message Broker is explained here: https://learn.microsoft.com/en-us/archive/msdn-magazine/2014/june/mvvm-the-mvvm-light-messenger-in-depth#using-messages
Related
This question already has answers here:
What is DataContext for?
(4 answers)
Closed 4 months ago.
sorry about this question. I know MVVM exist for many years but each time I try to code something with it I face the same issue again and again ans I'm still looking for a real good tutorial about this.
Let's consider we have a main window (MainWindow.xaml) with its view model (MainViewModel.cs).
This window has a grid, in my grid I define 2 user controls. Whatever it is. One is on the left, one on the right. On my main window I have create, in MainViewModel.cs an engine:
internal class MainWindowViewModel
{
public MainWindowViewModel()
{
QCEngine qcEngine = new();
}
}
This engine is my unique model and contains a complex code that read data. Whatever. This engine has a public list of value. I want to display these values on my left and right panels in different ways. Again whatever. The display is not my issue.
My issue is how I pass this list or the entire engine reference to my panels? I'm really lost. I can do this in few seconds with any classic WinForms but I never figure out how to do in MVVM. I'm at this moment where I give up MVVM to do classic WinForms. This time I want to understand.
Can you help me?
My QC engine is a RFID reader. It already works fine as console application. All parameters are in a config file. the idea of the interface is to give more flexibility to the reader. Having a nice result screen, a setting screen, some interactions.
<Window x:Class="Beper.QCTable.Control.View.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:view="clr-namespace:Beper.QCTable.Control.View"
xmlns:viewmodel="clr-namespace:Beper.QCTable.Control.ViewModel"
mc:Ignorable="d"
Title="MainWindow"
Height="450"
Width="800">
<Window.DataContext>
<viewmodel:MainWindowViewModel />
</Window.DataContext>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<!-- Menu -->
<Menu Grid.Row="0" FontSize="20">
<MenuItem Header="_Menu">
<MenuItem Header="_Advanced"/>
</MenuItem>
</Menu>
<!--Header-->
<StackPanel Grid.Row="1" Background="Orange">
<TextBlock FontSize="20">
Header
</TextBlock>
</StackPanel>
<!--Body-->
<Grid Grid.Row="2">
<view:TabPanel/>
</Grid>
<!--Status Bar-->
<StatusBar Grid.Row="3" FontSize="20">
<StatusBarItem>
Status
</StatusBarItem>
</StatusBar>
</Grid>
</Window>
Focus on tab panel:
public class TabPanelViewModel
{
public ObservableCollection<TabItem> Tabs { get; set; } = new ObservableCollection<TabItem>();
public TabPanelViewModel()
{
Tabs.Add(new TabItem { Header = "One", Content = "One's content" });
Tabs.Add(new TabItem { Header = "Two", Content = "Two's content" });
}
}
I cannot chare the engine code but, really, it is just a list of keys (RFID keys / EPC). This is the only public data. I want to display this list of key by group under my tabs.
Passing "this list or the entire engine reference" to the view defats the purpose of implementing the MVVM design pattern in the first place.
What you should do is to use the engine to prepare and set the state of your app/view in your view model.
The controls in the views should then bind to properties of the view model that contains, and effetively defines, the current state.
I'm an absolute beginner in WPF and tried to setup a simple DataBinding that updates the text of a TextBlock based on the text value in a TextBox when you click a button. I got it to work, but i found two different variants of doing it and in both cases something seems off.
Variant 01 works just as it should, but the fact that the target updates the source seems off.
In Variant 02 the source updates the target, but the UpdateSourceTrigger is useless and the only thing the mode does is blocking the target from getting updated, so i can do it manually.
Both variants get the thing done, but in both cases there is something that bothers me and seems off. So what's the 'right' way of doing this and DataBindings in general?
C# Code for both variants:
using System;
using System.Collections.Generic;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
namespace TestProject {
public partial class MainWindow {
public MainWindow() {
InitializeComponent();
// Value propagation: Target(InputFieldVariant01) -> Source(OutputFieldVariant01)
Binding binding = new Binding("Text");
binding.Source = OutputFieldVariant01;
binding.UpdateSourceTrigger = UpdateSourceTrigger.Explicit;
binding.Mode = BindingMode.OneWayToSource;
InputFieldVariant01.SetBinding(TextBox.TextProperty, binding);
// Value propagation: Source(InputFieldVariant02) -> Target(OutputFieldVariant02)
Binding binding2 = new Binding("Text");
binding2.Source = InputFieldVariant02;
binding2.UpdateSourceTrigger = UpdateSourceTrigger.Explicit;
binding2.Mode = BindingMode.OneWayToSource; // blocks the updating of the OutputField i guess (?)
OutputFieldVariant02.SetBinding(TextBlock.TextProperty, binding2);
}
private void refreshBtnVariant01_refreshTextBlock(object sender, RoutedEventArgs e) {
InputFieldVariant01.GetBindingExpression(TextBox.TextProperty)?.UpdateSource();
}
private void refreshBtnVariant02_refreshTextBlock(object sender, RoutedEventArgs e) {
OutputFieldVariant02.GetBindingExpression(TextBlock.TextProperty)?.UpdateTarget();
}
}
}
and here is my .xaml:
<Window x:Class="TestProject.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:TestProject"
mc:Ignorable="d"
Title="MainWindow" Height="120" Width="300">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="20"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
<RowDefinition Height="20"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="20"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="10"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="20"/>
</Grid.ColumnDefinitions>
<TextBlock Grid.Row="1" Grid.Column="2" TextAlignment="Center">Variant 01</TextBlock>
<TextBox Grid.Row="2" Grid.Column="2" Name="InputFieldVariant01" MinWidth="100"></TextBox>
<Button Grid.Row="3" Grid.Column="2" Content="Refresh TextBlock" Click="refreshBtnVariant01_refreshTextBlock" Margin="0, 5"></Button>
<TextBlock Grid.Row="4" Grid.Column="2" Name="OutputFieldVariant01"></TextBlock>
<TextBlock Grid.Row="1" Grid.Column="4" TextAlignment="Center">Variant 02</TextBlock>
<TextBox Grid.Row="2" Grid.Column="4" Name="InputFieldVariant02" MinWidth="100"></TextBox>
<Button Grid.Row="3" Grid.Column="4" Content="Refresh TextBlock" Click="refreshBtnVariant02_refreshTextBlock" Margin="0, 5"></Button>
<TextBlock Grid.Row="4" Grid.Column="4" Name="OutputFieldVariant02"></TextBlock>
</Grid>
</Window>
A few points, you are doing all this binding stuff in code. I suggest looking into MVVM patterns since you are new. The basic premise is
M = Model - where the underlying data is coming from / stored to
V = View - the user interface presentation context
VM = ViewModel - the glue getting/sending data to ex: sql database, but also making available to the view / end user.
It can typically be found that you create a view model object such as a class and it has public getter/setter properties on it. When the object is created within your view constructor and set as the DataContext, all bindings can be done directly within the xaml. The class does not need to know what the view does with it, the view doesnt need to know how the data is available. So you can simplify much of this such as
namespace TestProject
{
public partial class MainWindow
{
public MainWindow()
{
InitializeComponent();
DataContext = new MyViewModel();
}
}
}
Now, in another class such as example indicates above
namespace TestProject
{
public class MyViewModel : INotifyPropertyChanged
{
#region INotifyPropertyChanged Members
public event PropertyChangedEventHandler PropertyChanged;
protected void RaisePropertyChanged(string propertyName)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
#endregion INotifyPropertyChanged Members
private string _someString = "test string";
public string SomeString
{
get { return _someString; }
set
{
_someString = value;
RaisePropertyChanged(nameof(SomeString));
}
}
private int _someNumber = 18;
public int SomeNumber
{
get { return _someNumber; }
set
{
_someNumber = value;
RaisePropertyChanged(nameof(SomeNumber));
}
}
public List<SomeTableStructureFromDatabase> ListOfData { get; }
public MyViewModel()
{
ListOfData = SomeMethodToGetDataFromSQLDatabase();
}
}
}
So, in the above sample, you can see the PUBLIC get/set with some default values to the string and numeric values. Yes, I also included the INotifyPropertyChanged extension to the class. You can read more on that later, but allows view components to trigger refresh when things change either internally to the class to refresh the view, or being pushed from the view back to the view model.
Now, how to handle the view. As YOU are developing, you just need to know the names of the pieces on the view model that are exposed publicly. Then, in the xaml, identify the bindings directly. Again, the view should not know how or where the data parts are coming from, just what they are called and exposed as. So the VIEW (MainWindow.xaml) might have your entry textblocks/textbox, etc as:
<TextBox MinWidth="100" [yes, you can assign grid row/columns as normal]
Text="{Binding SomeString, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}" />
<TextBox Width="45" MaxLength="4"
Text="{Binding SomeNumber, Mode=OneWayToSource, UpdateSourceTrigger=PropertyChanged}" />
Notice the direct binding of the textboxes. Since the MainWindow has its DataContext based on the MyViewModel class created in its constructor, the publicly exposed properties are available to bind to. It can all be handled in the xaml. You just need to know what the property is called on the class. You dont need to explicitly NAME each of the controls so the .CS code has to know the view side name as well.
Also, your context of forcing the mode as ONE WAY TO SOURCE is not going to be as common as you might think. Think of it this way. You want to pull data from a database, expose it for being edited and then saved back. If one-way to the source, you cant get and push TO the field to show the user. So, explicitly stating the mode is one way you might shy away from unless truly needed.
Anyhow, hope this might open your mindset to additional reading and understanding of some bindings. Lastly, as I sampled the class with default text string and numeric values, when you do run the form, you should see those values default when the form is presented. Also, as a numeric (or even date/time as applicable to DatePicker control), you dont have to worry about data conversion from text entry and making sure numeric or bogus text. The binding will only update the value if it is the proper data type for the property being bound to.
The way I was taught binding is by implementing the INotifyPropertyChanged interface (See docs #MSDN). For collections there is an ObservableCollection Type.
You may want to look at MVVM pattern later on but for now just focus on Binding.
In XAML there is a special syntax called XAML Markup Extension.
Here is an example #MSDN.
I have a working program in Caliburn Micro but am moving over to MvvmCross. What I have working in Caliburn is a ShellView (Parent) that displays my navigation buttons and a cart. On that view, there is another view which is my selection of the navigation buttons, let's call it ActiveView (the view changes, in Caliburn it was ActiveItem() to change the view).
In MvvmCross, I cannot get this same functionality to work. After 3 days of searching and reading, I need help. Here is the image of the program, Blue outline is ShellView, inside of it Red outline is ActiveView.
What I get with MvvmCross is the ShellView, with no ActiveView. So the parent works, but no child is displayed. I have created a few other MvvmCross apps but they contain no navigation.
I have 2 Code Versions, First works but creates a second Window. Second keeps a single Window, but does not navigate. I need a single window with navigation. I feel I have a core misunderstanding and cannot find a source that explains it.
First Sample Works, but creates 2 Windows. An empty window (from MainWindow.xaml) and a second from ShellView. My assumption for 2 Windows opening when app is ran, is MainWindow being a window, and ShellView also being set to Window in xaml and cs.
Based on MvvmCross Playground.Wpf
<views:MvxWindow
x:Class="MvxKioskMtg.Wpf.Views.ShellView"
xmlns:views="clr-namespace:MvvmCross.Platforms.Wpf.Views;assembly=MvvmCross.Platforms.Wpf"
xmlns:mvx="clr-namespace:MvvmCross.Platforms.Wpf.Binding;assembly=MvvmCross.Platforms.Wpf"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:local="clr-namespace:MvxKioskMtg.Wpf.Views"
mc:Ignorable="d"
d:DesignHeight="450" d:DesignWidth="800"
Background="#3d3d3d"
>
<views:MvxWindow.ContentTemplate>
<DataTemplate>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition />
</Grid.RowDefinitions>
<Grid DataContext="{Binding DataContext, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type Window}}}">
<Grid.ColumnDefinitions>
<ColumnDefinition />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Button Content="Welcome" Command="{Binding ShowWindowChildCommand1}" Grid.Column="0"/>
<Button Content="Checkout" Command="{Binding ShowWindowChildCommand2}" Grid.Column="1"/>
</Grid>
<ContentPresenter Content="{Binding}" Grid.Row="1" />
</Grid>
</DataTemplate>
</views:MvxWindow.ContentTemplate>
</views:MvxWindow>
ShellView.xaml.cs
public partial class ShellView : MvxWindow
{
public ShellView()
{
InitializeComponent();
}
}
Second Version Layout looks correct, but no navigation. Click buttons has no effect. Adding break point to the Command that changes views and it is never reached.
XAML changed from MvxWindow to MvxWpfView in 4 places, otherwise same as First Version.
<views:MvxWpfView
<views:MvxWpfView.ContentTemplate>
</views:MvxWpfView.ContentTemplate>
</views:MvxWpfView>
ShellView.xaml.cs
public partial class ShellView : MvxWpfView
{
public ShellView()
{
InitializeComponent();
}
}
In the XAML, if I update the DataContect to AncestorType={x:Type views:MvxWpfView} from Window, it does update the View, but the entire View. Not the ContentPresenter space. So I lose my navigation buttons.
Which of these methods is correct, and what am I doing incorrect? Am I totally off base? Thank you for any help and guidance you can provide. I'll happily read any sources.
I have a MainMenu user control that I use in my MainWindow view, which has a MainWindowViewModel. MainMenu markup begins like:
<UserControl x:Class="ApptEase.Client.Shell.Controls.MainMenu"
....
d:DesignHeight="25">
<UserControl.DataContext>
<shell:MainWindowViewModel />
</UserControl.DataContext>
<Menu Height="25" VerticalAlignment="Top">
<MenuItem Header="_File">
In design mode I get 2 errors in my Error List, both are:
Unable to cast object of type 'System.Windows.Application' to type
'ApptEase.Client.App'
The first occurs in the <shell:MainWindowViewModel /> line in the user control markup above. The second occurs in the <shell:MainMenu Grid.Row="0" /> line of the MainWindow markup excerpt below.
MainWindow Excerpt:
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="Auto" />
<RowDefinition Height="*" />
</Grid.RowDefinitions>
<shell:MainMenu Grid.Row="0" />
<ContentControl Grid.Row="1" prism:RegionManager.RegionName="ContentRegion" />
</Grid>
My MainWindowViewModel derives from BaseViewModel:
public abstract class BaseViewModel : BindableBase
{
protected BaseViewModel()
{
AppState = ((App)Application.Current).AppState;
}
...
}
If I comment out the ((App)Application.Current).AppState line, the errors disappear. Yet I see no output except "successful build" in the output window when I build, and the app starts up fine, i.e. the BaseViewModel ctor executes fine with no exception.
If I have no option but to accept the error messages are harmless, is there any way to suppress them? I don't see compiler directives working in XAML markup.
I don't know if this is just a 'catch-all' or a proper solution, but I have solved my problem by changing my BaseViewModel ctor to look like:
protected BaseViewModel()
{
if (!DesignerProperties.GetIsInDesignMode(new DependencyObject()))
{
_app = (App)Application.Current;
}
}
It seems that in design mode, Application.Current is not of type App.
By default when you use "ActivateItem(new Control());" your control is loaded into a ContentControl which with the name ActiveItem, fro example. . If I have multiple content controls on my page how would I load controls into them whilst retaining the ability to use the default functionality of being able to load controls into the the active item control.
for example I want to have a login control to be loaded into the Login ContentControl, and when a user successfully login I want a new control to be loaded into the ActiveItem ContentControl.
Thanx in advance.
If the ViewModel that gets binded to the UI contains a property with the name that matches a content control. The Content control view automatically gets resolved the the view supported by this property, provided this property itself is a ViewModel type and has been registed with Ioc container. For example
<ContentControl x:Name="LoginStatus"></ContentControl>
If there is a property LoginStatus on the main ViewModel (LoginStatus property itself is a ViewModel). The content control would correctly get rendered with the appropriate view.
This is an old question, but in case anyone is having the same issue, here is my solution:
Your main window that contain both (or even more than two) of your User Controls must be inherited from Caliburn.Micro.Conductor<Screen>.Collection.AllActive;
Your User Controls must be inherited from Caliburn.Micro.Screen;
You must also keep naming conventions in mind. If you use MenuUC as the name of a ContentControl in your View, also create a property named MenuUC in your ViewModel;
Initialize your UserControl as I do in Constructor;
Now you can use ActivateItem(MenuUC) and DeactivateItem(MenuUC) everywhere in your code. Caliburn.Micro automatically detects which one you want to work with.
Example XAML View code:
<Window x:Class="YourProject.Views.YourView"
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"
mc:Ignorable="d"
Title="YourViewTitle" Width="900" Height="480">
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="4*"/>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Menu Side Bar -->
<ContentControl Grid.Row="0" Grid.Column="0" x:Name="MenuUC" />
<!-- Panel -->
<Border Grid.Column="1" Grid.RowSpan="2" BorderThickness="1,0,0,0" BorderBrush="#FF707070" >
<ContentControl x:Name="PanelUC" />
</Border>
</Grid>
</Window>
Example C# ViewModel code:
class YourViewModel : Conductor<Screen>.Collection.AllActive
{
// Menu Side Bar
private MenuUCViewModel _menuUC;
public MenuUCViewModel MenuUC
{
get { return _menuUC; }
set { _menuUC = value; NotifyOfPropertyChange(() => MenuUC); }
}
// Panel
private Screen _panelUC;
public Screen PanelUC
{
get { return _panelUC; }
set { _panelUC = value; NotifyOfPropertyChange(() => PanelUC); }
}
// Constructor
public YourViewModel()
{
MenuUC = new MenuUCViewModel();
ActivateItem(MenuUC);
PanelUC = new FirstPanelUCViewModel();
ActivateItem(PanelUC);
}
// Some method that changes PanelUC (previously FirstPanelUCViewModel) to SecondPanelUCViewModel
public void ChangePanels()
{
DeactivateItem(PanelUC);
PanelUC = new SecondPanelUCViewModel();
ActivateItem(PanelUC);
}
}
In the above example, ChangePanels() acts as a method to load new User Control into your ContentControl.
Also read this question, it might be help you further.
You should have a look at Screen Conductors. See here.