Problémy s prekrytím SettingsFlyout prvkom WebView

Ak niektorá stránka vašej aplikácie zobrazuje webový obsah prostredníctvom prvku WebView, ktorý je situovaný pri pravom okraji obrazovky dôjde pri zobrazení prvku SettingsFlyout z knižnice Callisto SDK k vizuálnemu konfliktu. Prvok WebView sa zobrazí tak, že prekryje obsah panelu vytvoreného pomocou objektu SettingsFlyout. Súvisí to z prekrývaním virtuálnych vizuálnych vrstiev (z-orders). Inými slovami, prvok SettingsFlyout sa zobrazí pod prvkom WebView. Najlepšie to vysvetlí obrázok, na ktorom je prekrytie zvýraznené obdĺžnikom

Prekrytie panelu prvkom WebView.

Riešení je niekoľko. Najjednoduchšie bude na dobu zobrazenia panelu nastavenia aplikácie prvok WebView skryť a potom ho obnoviť. Takýto postup ale pôsobí hodne rušivo, nakoľko zrazu sa stratí časť obrazovky aplikácie. Efektnejšie je po dobu zobrazenia panelu nastavenia nahradiť dynamické okno WebView statickou kópiou – statickým obrázkom vyfarbeným cez objekt WebViewBrush. Takýto obrázok bude prekrytý prvkom SettingsFlyout.

V XAML kóde na rovnaké miesto umiestnite prvok WebView aj prvok Rectangle. Pri zobrazovaní nastavovacieho panelu sa prvok Rectangle vyfarbí cez WebViewBrush, ktorý obsahuje statický obrázok webovej stránky.

<WebView x:Name=”webView” Grid.Column=”1″></WebView>

<Rectangle x:Name=”rectWebViewBrush” Grid.Column=”1″></Rectangle>

 

V takomto prípade nemôžete zobrazovať panel univerzálne pre celú aplikáciu na úrovni App.xaml.cs, ale individuálne pre všetky stránky aplikácie. Na každej stránke definujete obsluhu udalosti aktivovania nastavenia v metóde

protected override void OnNavigatedTo(NavigationEventArgs e)

{

SettingsPane.GetForCurrentView().CommandsRequested += OnCommandsRequested;

base.OnNavigatedTo(e);

}

 

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)

{

SettingsPane.GetForCurrentView().CommandsRequested -= OnCommandsRequested;

base.OnNavigatingFrom(e);

}

Kód obsluhy udalosti CommandsRequested bude:

void OnCommandsRequested(SettingsPane sender, SettingsPaneCommandsRequestedEventArgs args)

{

CreateWebViewBrush();

var about = new SettingsCommand(“Ochrana osobných údajov”,

“Ochrana osobných údajov”, (handler) =>

{

var settings = new SettingsFlyout();

settings.Content = new AboutUserControl();

settings.HeaderText = “Ochrana osobných údajov”;

settings.Closed += settings_Closed;

SwitchToWebViewBrush(true);

settings.IsOpen = true;

});

args.Request.ApplicationCommands.Add(about);

}

 

V metóde CreateWebViewBrush bude webová stránka nahradená statickým obrázkom vyfarbeným cez

private void CreateWebViewBrush()

{

WebViewBrush wvbBrush = new WebViewBrush();

wvbBrush.SourceName = “webView”;

wvbBrush.Redraw();

rectWebViewBrush.Fill = wvbBrush;

}

 

Prepínanie viditeľnosti prvku WebView má na starosti metóda

private void SwitchToWebViewBrush(bool bHide)

{

if (bHide)

{

webView.Visibility = Windows.UI.Xaml.Visibility.Collapsed;

}

else

{

webView.Visibility = Windows.UI.Xaml.Visibility.Visible;

rectWebViewBrush.Fill = new SolidColorBrush(Colors.Transparent);

}

}

 

Obnovenie pôvodného stavu sa realizuje v metóde settings_Closed, ktorá je definovaná pri vytváraní objektu SettingsFlyout

void settings_Closed(object sender, object e) { SwitchToWebViewBrush(false); }

Správny stav, prekrytie statického obrázku webového okna panelom nastavenia.

Reklamy

Pridaj komentár

Zadajte svoje údaje, alebo kliknite na ikonu pre prihlásenie:

WordPress.com Logo

Na komentovanie používate váš WordPress.com účet. Odhlásiť sa / Zmeniť )

Twitter picture

Na komentovanie používate váš Twitter účet. Odhlásiť sa / Zmeniť )

Facebook photo

Na komentovanie používate váš Facebook účet. Odhlásiť sa / Zmeniť )

Google+ photo

Na komentovanie používate váš Google+ účet. Odhlásiť sa / Zmeniť )

Connecting to %s


%d bloggers like this: