This is a migrated thread and some comments may be shown as answers.

How to display RadGridView in a dynamic layer of a WeatherStation's RadMap

7 Answers 137 Views
Map
This is a migrated thread and some comments may be shown as answers.
Elena
Top achievements
Rank 1
Elena asked on 07 Jun 2011, 03:00 PM
 

Добрый день!

(приношу извинения за автоматический перевод ниже)

 

Я разрабатываю приложение, которое должно отображать датчики на карте.

Показания датчиков непрерывно записываются в базу MS SQL Server 2008 К2

При нажатии на пиктограмму (или кружок) датчика изображенную на карте нужно показать RadGridView c Real-Time данными от датчика.

Аналогичное поведение нужно обеспечить, если увеличивать масштаб карты при центрировании датчика.

Мне хотелось бы использовать Dynamic Layer и ViewModel, такие же, как в примере Weather Stations.

Но я не могу понять, две вещи:

1)    Нажатие на пиктограмму датчика на карте должно вызвать событие, которое связано с командой ViewModel, поэтому на карте датчики нужно создавать как кнопки RadButtons?

Так сделано в Weather Stations:

<telerik:RadButton Style="{StaticResource WidgetButtonStyle}">
  
Command="{Binding DataContext.ViewDetailsCommand, ElementName=RadMap1}" CommandParameter="{Binding}" Tag="{Binding DataContext, ElementName=RadMap1}" >
  
                                               <i:Interaction.Triggers>
  
                                                           <i:EventTrigger EventName="MouseEnter">
  
<ei:PlaySoundAction Source="/Sounds/Swish.mp3"/>
  
                                                           </i:EventTrigger> 
  
                                                           

2)   

При нажатии на такую кнопку я получу данные из WCF в DynamicSource в методе

public void ItemsRequest(object sender, ItemsRequestEventArgs e)

и заполню коллекцию для отображения ее в RadGridView.

Только как я могу во ViewModel при обработке 1) создать в DynamicLayer и отобразить RadGridView?

 

Если можно более подробно объяснить, как отображается RadGridView в примере Weather Stations, в обработчике:

        private void OnViewDetailsCommandExecuted(object obj)

        {

            this.CurrentWeatherInfo = obj as WeatherInfo;

            this.SetZoomToDetailsLevel();

  }

в примере в RadGridView  нет связанного c ViewModel свойства Visibility!

Спасибо Вам за помощь в создании программы


 

Good afternoon!

 

I create the application which should display indications of sensors on a RadMap.

I have tried to create the application, as in your example WeatherMonitor (WeatherStation).

 It is necessary in DynamicLayer to show on a map sensors in the form of multi-coloured circles, in dependence

from their state. By pressing (or map zooming) on a sensor circle it should be displayed RadGridView

with sensor indications.

For me two questions:

1. Circles (figure) of sensors should be buttons on a map to binding to them processing of event of pressing a circle

2. How in DynamicLayer to display RadGridView by pressing a circle? It should be a separate window or not?

Because of a design abundance in sample WeatherMonitor it is very difficult to understand logic of operation of the application!

Can be eat more detailed explanation of algorithm of operation WeatherMonitor than here

 

WeatherMonitor's blog

 

 

Thanks for any help

7 Answers, 1 is accepted

Sort by
0
Andrey
Telerik team
answered on 09 Jun 2011, 09:44 AM
Hi Elena,

The Weather Station is quite complex application so I wouldn't recommend it as a starting point for your work with RadMap. It seems to me that it would be better to start from the simple examples in our demo application which demonstrates the most important features of the map control. Then you will be able to select those that you need to implement in your application.

1. InformationLayer is ItemsControl that supports the usage of different item templates. Like most other items controls it allows you to use ItemsTemplateSelector to select the corresponding template based on the data or the map zoom level. I would recommend you to take a look into the following sample in our demo application:

http://demos.telerik.com/silverlight/#Map/DataBinding

2. You can find example which demonstrates major features of the DynamicLayer here:

http://demos.telerik.com/silverlight/#Map/DynamicLayer

Weather Stations - это достаточно сложное приложение. Так что я бы не рекомендовал Вам начинать работу с RadMap  с этого приложения. Оно активно использует различные возможности RadMap. Мне кажется, что было бы лучше начать с более простых примеров в нашем демонстрационном приложении, которое показываетосновные возможности RadMap. После их обзора Вы сможете выбрать те из них, которые необходимы для реализации Вашего приложения.

1. InformationLayer является ItemsControl и позволяет использовать различные шаблоны представления данных. Подобно многим другим ItemsControl он разрешает Вам исполльзовать ItemTemplateSelector для выбора шаблона в зависимости от данных и уровня детализации (ZoomLevel) RadMap. Я бы рекомендовал Вам посмотреть следующий пример:

http://demos.telerik.com/silverlight/#Map/DataBinding

2. Вы можете найти пример, который демонстрирует основные возможности DynamicLayer здесь:

http://demos.telerik.com/silverlight/#Map/DynamicLayer

Best wishes,
Andrey Murzov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Elena
Top achievements
Rank 1
answered on 09 Jun 2011, 02:23 PM

Thanks for your answer, Andrey!

 

I will probably try to use InformationLayer but if it is possible

Correct me if I am mistaken in WetaherStation:

 

From consideration Styles.xaml and Main.xaml to me it is clear that

WeatherStation it is created with application of MVVM pattern and in ViewModel do not form Controls

ViewModel only operates with the data from DynamicSource in collection WetaherInfo

ViewModel defines commands who work with logic of data model, and are binded to Controls from View

All visual behaviour WetaherStation is realised in Xaml code with usage ControlTemplates and VisualStateManager

As a matter of fact, at choice Location on a map it is displayed

 

<local:WeatherInfoItemTemplateSelector x:Name = "WeatherInfoItemTemplateSelector"

                                               BasicItemTemplate = "{StaticResource BasicWeatherInfoItemTemplate}"

                                               DetailedItemTemplate = "{StaticResource DetailedWeatherInfoItemTemplate}"/>

 

<DataTemplate x:Key = "BasicWeatherInfoItemTemplate">

 

<! - here in Styles.xaml it is defined ControlTemplate with name WidgetButtonStyle->

                                               <telerik:RadButton Style = "{StaticResource WidgetButtonStyle}"                                                       

                                               telerik:MapLayer. Location = "{Binding LocationInfo. Center}"

<! - here there is a binding to the output agent of the command from ViewModel  

         private void OnViewDetailsCommandExecuted (object obj)

 ->

                                               Command = "{Binding DataContext. ViewDetailsCommand, ElementName=RadMap1}"                                                                                          CommandParameter = "{Binding}"

                                               Tag = "{Binding DataContext, ElementName=RadMap1}">

 

<! - in Styles.xaml->

<Style x:Key = "WidgetButtonStyle" TargetType = "telerik:RadButton">

Defines a number of states and logical units of this already new control

<VisualStateGroup x:Name = "CommonStates">

                <VisualState x:Name = "MouseOver"> <! - displays a brief information->

 

Accordingly

<! - in Styles.xaml->

<Style x:Key = "DetailedPanelStyle" TargetType = "ContentControl">

                               <Setter Property = "VerticalAlignment" Value = "Center"/>

                               <Setter Property = "HorizontalAlignment" Value = "Center"/>

 

                               <Setter Property = "Template">

                                               <Setter. Value>

                                                               <ControlTemplate TargetType = "ContentControl">

<!-- Defines new Control displaying the detailed information

 

It is important to me to understand logical switching between states and interaction thus with ViewModel.

By pressing on telerik:RadButton Style x:Key = "WidgetButtonStyle" we pass in state XState

and thus through a binding to the trigger output agent OnXState from ViewModel is called

-->

 

I need to realise following behaviour in the program

1. To load map BingProvider

2. To display on a map sensors in the form of Circles  or ToolTip received of model EF4.0 through WCF or WCF RIA

3. The sensor has some measures

4. By pressing a sensor tag it is necessary to show RadGridView with current indications of sensors near the sensor on a map

5. It is necessary to display indications of several sensors in several RadGridView on a map

6. It is necessary to provide possibility to close the sensor indication

 

It agree with you, Andrey that example WeatherStation very difficult, but before me the simple task is put too not...

 

 

Please, once again I ask you to explain me the logic of transition between states at mapping

 

 

Thanks

0
Teodor
Telerik team
answered on 14 Jun 2011, 05:34 PM
Hello Elena,

Let me try to clarify some of the points you have:

  1. To load map BingProvider
    This article reveals how to do the above. Note that you need to have a Bing Maps Key.

  2. To display on a map sensors in the form of Circles or ToolTip received of model EF4.0 through WCF or WCF RIA.
    In order to display items on a RadMap, you need to have InformationLayer or DynamicLayer. The WeatherStation demo uses DynamicLayer. Since it derives from Telerik's ItemsControl, we have used ItemTemplateSelector to apply different DataTemplates to the items shown on the map (depending on the zoom level we show detailed or basic information). Feel free to use this approach should you need to display different information according to some factor.

  3. By pressing a sensor tag it is necessary to show RadGridView with current indications of sensors near the sensor on a map
    You can use a Popup or RadWindow for this.

  4. It is necessary to display indications of several sensors in several RadGridView on a map
    Once these several RadGridViews are items of a Dynamic/Information Layer, this should come out of the box.
Hope this helps. Let us know in case you have further queries.

Greetings,
Teodor
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Elena
Top achievements
Rank 1
answered on 24 Jun 2011, 08:08 PM
Thanks Teodor for your helpIf will allow still to steam of the common questionsI think that for a wide range of the applications displaying labels on a map it is required.
By pressing a label or mouse cursor on label and displayed the detailed information.
The increase in scale of a map is thus possible or not.

It would be healthy to receive not a difficult example of such operation with a map.I think that at such mode of work with a map it is necessary, as you and have made in example WeatherMonitor,
to create TemplateSelector displaying the stylised button at smaller increase in a map and ItemControl with DataTemplate at large scale increase.

In your example DelegateCommand ViewDetailCommand command is attached with the button with event stub ViewDetailCommandExecuted.
It calls SetZoomToDetailsLevel (
detailedViewZoomLevel) as a result a map is scaled and the detailed information on the template is displayed. Correctly I argue or not?Probably you truly to me have advised to use in my project InformationLayer. If to use DynamicLayer in such project it is necessary after map loading in method DynamicSource. ItemsRequest to load the information on sensors and when the concrete sensor is selected it is necessary to load in the same method its indications in DetailInfos DataTemplate.My theoretical knowledge of technology WPF it is not enough to understand difficult DataTemplate example WeatherMonitor.
Therefore I ask to forgive for naive questions
Where in example WeatherMonitor there is a logic of return from Detail to BasicTemplate?

If to remove all animation and response to rendering of the mouse for mapping of a brief information on weather what bindings to ViewModel need to be left?If to simplify my task so:
1. After loading of a map I in DynamicLayer. DynamicSource. ItemsRequest I load a collection of sensors in property ViewModelspublic ObservableCollection <Sensor> {...}
2. I specify as unit DynamicLayer MapTemplateSelector   SensorDataTemplate   MeasurementsDataTemplate
3. SensorDataTemplate RadButton or ToolTip - a label on small scale of a map
4. MeasurementsDataTemplate RadGrid or mine ItemControl DataTemplate
5. I assign an eccles-jordan circuit for SensorDataTemplate with the output agent in ViewModel.
As a result the map to increase and will display in DynamicLayer MeasurementsDataTemplate
6. After me it is necessary to load in method DynamicSource. ItemsRequest from a server of the indication of the sensorQuestions:

What it is necessary to realise in DynamicSource and ViewModel for that the minimum functionality?
What methods ViewModel and properties need to be created and to what properties of XAML templates and map need to be binded them?

Thanks
(I apologise for the automatic translator)

0
Teodor
Telerik team
answered on 30 Jun 2011, 09:59 AM
Hi Elena,

Thank you for your reply.

From what I manage to catch reading the automatic translation, your main concern is how you switch different DataTemplates/Styles of data displayed on the map. Here is how this works in the WeatherMonitor application:

1. The RadMap there uses DynamicLayer
2. The DynamicLayer derives from Telerik.Windows.Controls.ItemsControl control which has a ItemTemplateSelector property. It can be used to give different DataTemplates to different items. Here is the usage in the WeatherMonitor application:

<local:WeatherInfoItemTemplateSelector x:Name="WeatherInfoItemTemplateSelector"
    BasicItemTemplate="{StaticResource BasicWeatherInfoItemTemplate}"
    DetailedItemTemplate="{StaticResource DetailedWeatherInfoItemTemplate}" />
 
<telerik:DynamicLayer x:Name="dynamicLayer" DynamicSource="{Binding MapSource}"
    ItemTemplateSelector="{StaticResource WeatherInfoItemTemplateSelector}" >
        <telerik:ZoomGrid LatitudesCount="4" LongitudesCount="4" MinZoom="4" />
        <telerik:ZoomGrid LatitudesCount="256" LongitudesCount="256" MinZoom="10" />
</telerik:DynamicLayer>

As you see we use 2 DataTemplates and we assign them in the WeatherInfoItemTemplateSelector class:

public class WeatherInfoItemTemplateSelector : DataTemplateSelector
    {
        public DataTemplate BasicItemTemplate { get; set; }
        public DataTemplate DetailedItemTemplate { get; set; }
 
        public override DataTemplate SelectTemplate(object item, DependencyObject container)
        {
            switch ((container.GetVisualParent<DynamicLayer>().MapControl).ZoomLevel)
            {
                case 10:
                case 11:
                    return this.DetailedItemTemplate;
                default:
                    return this.BasicItemTemplate;
            }
        }
    }


Another way to have various items on different zoom levels is to use Styles. See how you can do that in this example. 

Hope this leads you to the right direction. Let us know in case you need more support in the future.

Regards,
Teodor
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Elena
Top achievements
Rank 1
answered on 30 Jun 2011, 07:11 PM

Thanks for your advices Teodor!

 

You have helped me to write an application template of RadMap

I apply it

Correct that will consider it necessary

 


By this example for me 3 questions:

1 How to anchor a detailing window position to station control position on map

2 How to show loading indicator of the data in loaded in StationDataService

3 If it is a lot of measurements, and it is necessary to show only last actual 20-30,

    it is possible to think up that what property and the main thing as it to load in WCF RIA?

 


My ticket ID is: 439478  


Thanks

 

0
Accepted
Teodor
Telerik team
answered on 01 Jul 2011, 05:23 PM
Hello Elena,

Thank you for contacting us.

1. Once items are populated in the Dynamic/Information layer, the RadMap automatically takes care of positioning them according to their Location, so all you need is to set your items coordinates properly. Additionally, you can control item's offsets through Margin properties in the Style / DataTemplate of the items.

2. I am not sure I understand the question clearly, but if you need to show a busy indication while loading some data, feel free to use the RadBusyIndicator. Refer to the online demo and help sections for more insight on that.

3. You can call your RIA service Query with a Where or Take clause (or any other that match your filtering need) to shrink the results set, like:

var query = Context.GetStationsQuery(upLeft_Longitude, upLeft_Latitude, lowRight_Longitude, lowRight_Latitude).Take(30);

Hope this helps you.
All the best,

Teodor
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Map
Asked by
Elena
Top achievements
Rank 1
Answers by
Andrey
Telerik team
Elena
Top achievements
Rank 1
Teodor
Telerik team
Share this question
or