mvvm - UWP ContentDialog Invocation -

i using uwp , template 10 build gui app following mvvm pattern. part of application need invoke content dialog pressing button on main page. separate contentdialog created in standalone .xaml file purpose:

<contentdialog     x:class="uwp1.views.speech"     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"     xmlns:local="using:uwp1.views"     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"     mc:ignorable="d"     title="dictate"     primarybuttontext="accept"     secondarybuttontext="cancel"     primarybuttonclick="contentdialog_primarybuttonclick"     secondarybuttonclick="contentdialog_secondarybuttonclick"     >     <grid>         <grid.rowdefinitions>             <rowdefinition height="auto"/>             <rowdefinition height="auto"/>             <rowdefinition height="auto"/>             <rowdefinition height="auto"/>         </grid.rowdefinitions>         <grid.columndefinitions>             <columndefinition width="150" />             <columndefinition width="150" />         </grid.columndefinitions>             <button margin="15" content="dictate" grid.row="0" grid.column="0" horizontalalignment="stretch"/>         <button  margin="15" content="clear text" grid.row="0" grid.column="1" horizontalalignment="stretch"/>         <textblock grid.row="1" grid.columnspan="2" text="tap 'dictate', , speak" fontsize="12" />             <textblock margin="0 10 0 0" grid.row="2" grid.columnspan="2" text="message dication" horizontalalignment="center" fontsize="24"  />         <scrollviewer grid.row="3" grid.columnspan="2" height="300">             <textbox margin="5 5 5 10"  acceptsreturn="true"  />         </scrollviewer>     </grid> </contentdialog> 

what proper way open/invoke in main page pressing button (as need keep logic separated view , viewmodel)?

how now:

from main page invoke dictatecommand, in turn creates instance of contentdialog , shows it:

 <appbarbutton grid.column="1" icon="microphone" iscompact="true" horizontalalignment="right" command="{binding dictatecommand}"/>          public icommand dictatecommand { get; set; }          public async void dictate(object obj)         {             var contentdialog = new speech();             await contentdialog.showasync();         } 

it looks mvvm pattern breach me. please me in right way?

edit:

i have implemented dialog service , injected in main view model. however, got obstacle. dialog created separate view model , property encapsulates dialog text box value. when press 'accept' button on dialog - need value reflected on main view. need pass dialog's text box value dialog's view model main view model. should perform dependency injection deal it?

you have 4 options.

one first service, @ask-too-much explains. in fact, beautiful solution if it.

the benefits of first solution reusable. if not reusing ui, dedicated service might overkill, honest.

two second view-model event. say, page can subscribe view-model's event (let's call showcontentdialog) , when raised view-model, page handle presentation.

the benefits approach that, first approach, offloading effort class. in case, creating one-off solution without needing service, service interface, or injection of service somehow. if not waiting result of event, think idea 99% of issues yours.

three third approach use different control can bound property. example, since using template 10, can use modaldialog control has ismodal property. property in view-model (let's call ismodalvisible) can used control dialog without coupling it.

the part of invoke dialog logic of view-model, first 2 approaches. unlike first, not need service. unlike second, not need handler. it's "data binding" way it, , do.

four fourth way use messaging. messaging mechanism 1 view-model uses communicate another. in case use messaging view-model (with message might call showdialog) listened for, not in view-model, in page. work fine, too.

the down side need messaging solution, might have that. up-side logic handling visual relocated @ time messaging multicasted listening.

if you, consider number 3 first, perhaps. without little more understanding of app scenario, can't sure. developer, though. 4 of options good. sure not tempted passing uielement view-model. that's needless nastiness :)

best of luck!