سئوالات و مباحث WPF

[the_king]

خیلی ممنون استاد .
استاد ، من هنوز قشنگ این مسئله برام جا نیافتاد .
که چطور میشه مثلا وقتی برای کنترلی ، دو مقدارِ اولِ Margin را مشخص میکنیم (مثلا مینویسیم Marging = "20,50") با زمانی که 4 مقدار را بصورت کامل مشخص میکنیم (مثلا مینویسیم Margin = "20, 30, 0, 0") نتیجه شون و چیدمان اون کنترل ، با حالت قبلی فرق میکنه . چرا؟

اون که دو پارامتری و یا چهار پارامتری باشه که بحثش جدا است، وقتی left,top رو مشخص می کنید، right برابر left میشه و bottom برابر top.

        <StackPanel>
            <Button Height="50" Margin="1,2" Click="Button_Click"/>
            <Button Height="50" Margin="1,2,0,0" Click="Button_Click"/>
            <Button Height="50" Margin="1,2,3,4" Click="Button_Click"/>
        </StackPanel>

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            var button = (Button)sender;
            MessageBox.Show(button.Margin.ToString());
        }

Alignment, Margins, and Padding Overview - WPF

چرا تعریفِ Margin را این جوری میگه؟ :

The Margin property describes the distance between an element and its child or peers.

Margin که مسافت بین المنت خودش و المنت والد (یا در صورتی که اون والد ، سطر و ستون داره ، مسافت بین المنت خودش و اون خونه از سطر و ستون المنت والدش) به حساب میاد . مگه این طور نیست؟

Margin رو داره کلی معنی می کنه، نه برای یک المنت خاص. می بینید که or داره، یا این یا اون. مثلا برای Window که دیگه peers (همتا) ای در کار نیست که از اون فاصله بگیره، فاصله با فرزندان اون پنجره است، فاصله با its child ئه. اما برای StackPanel که والد داره، فاصله با همتا ها میشه، برای peers ئه، نه فاصله با فرزندان StackPanel ئه.

 

[SajjadKhati]

سلامی مجدد
خیلی ممنون استاد .
استاد ، یه فایل svg دارم (که پیوست میکنم) .
که شامل اطلاعات زیر هست :

<svg xmlns="http://www.w3.org/2000/svg" width="848" height="932" viewBox="0 0 848 932">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-1, .cls-2 {
        fill-rule: evenodd;
      }

      .cls-2 {
        fill: #14fa14;
      }
    </style>
  </defs>
  <path id="Color_Fill_Data_1" data-name="Color Fill Data_1" class="cls-1" d="M304,8L418,9c17.978-.812,48.371,2.151,67,6l52,6c43.238,9.506,89.86,20.116,126,39,23.178,12.112,46.149,22.932,60,44,12.444,18.93,15.013,111.707,2,133-22.867,37.416-73.491,55.079-120,69-123.017,36.82-336.8,45.675-463,4-45.294-14.957-88.637-27.689-114-62-11.75-15.9-14-33.435-14-62V124C41.3,57.409,117.047,38.427,190,21l74-10C277.209,8.163,293.738,13.569,304,8Z"/>
  <path id="Color_Fill_Data_2" data-name="Color Fill Data_2" class="cls-1" d="M259,615c-73.482,1.454-148.315-28.83-196-58-19.832-12.132-38.429-28.945-47-52-7.728-20.788-7.031-119.923,0-141,3.295-9.877,5.8-21.349,16-24,42.163,57.289,177.51,93.874,280,94v3C283.4,463.912,259.286,557.01,259,615Z"/>
  <path id="Color_Fill_Data_3" data-name="Color Fill Data_3" class="cls-1" d="M12,655h3c0.547-10.964,7.318-27.036,17-29,28.669,41.637,97.658,63.437,155,78,19.97,5.072,42.706,4.476,63,9l19,1c4.71,3.683,4.968,18.787,7,25l19,47c23.676,45.86,63.262,97.775,109,121v1H333c-9.8-5.158-26.2.634-38-2-23.5-5.246-50.4-2.524-74-8l-59-11c-44.157-12.182-84.1-27.707-116-52-16.412-12.5-24.04-32.85-34-52V655Z"/>
  <path id="Color_Fill_Shield" data-name="Color Fill Shield" class="cls-1" d="M349,502c39.135,0,84.257-6.261,108-23,11.381-8.024,32.47-38.133,44-41,6.278,5.6,15.142,7.943,23,12,20.15,10.4,38.259,20.269,64,26,23.647,5.265,46.048-3.941,68-4l58,148c11.57,27.754,23.1,70.8,10,107-9.65,26.663-29.467,44.246-45,65-10.469,13.989-21.788,27.228-32,41-4.25,5.732-6.267,13.751-15,15-11.783-7.3-29.024-7.5-43-12-36.762-11.843-83.916-18.873-115-38-30.164-18.561-55.626-46.794-70-81-14.914-35.49-19.646-81.552-31-120-5.949-20.147-9.828-41.039-16-62C354,524.808,349.725,513.947,349,502Zm49,32c2.509,22.819,13.228,50.775,20,72,16.42,51.464,20.627,111.8,59,141,20.386,15.51,42.86,20.921,71,30l53,17c4.353,1.413,16.1,5.121,18,4,11.346-8.022,20.624-23.847,29-35,19.5-25.968,59.5-51.969,47-105-6.574-27.886-18.617-53.122-29-78-7.288-17.464-13.155-35.265-20-52-3.922-9.588-2.105-21.918-16-22-6.8,4-26.778,2.708-35,1-19.573-4.066-33.4-5.219-49-12-11.313-4.919-21.848-14.468-35-17C488.891,510.183,450.781,532.762,398,534Z"/>
  <path id="Color_Fill_Grass" data-name="Color Fill Grass" class="cls-2" d="M492,363c100.8-2.089,148.743,30.839,204,73,12.014,9.167,43.931,39.174,49,53h-1c-10.312-14.959-25.59-29.982-40-41-9.538-7.293-18.013-16.957-28-24-45.917-32.382-130.778-66.717-206-43-19.2,6.054-38.12,13.174-54,23-45.866,28.38-77.1,74.61-94,132l-7,44v24c-0.007,39.264,6.7,71.062,18,99,37.621,93.041,91.3,156.473,184,194,17.539,7.1,41.29,10.551,59,14,22.07,4.3,51.389.594,69-4,61.974-16.169,109.037-46.519,135-98h2v3c-9.1,10.24-14.769,24.139-23,35-23.355,30.814-61.8,56.515-103,69-63.009,19.094-127.552,4.34-176-17-88.5-38.981-145.025-112.065-176-209-12.869-40.273-20.585-98.9-8-147,4.454-17.021,9.274-34.5,16-50A219.8,219.8,0,0,1,426,379c13.394-5.825,29.122-9.293,44-13ZM804,586c9.217,8.761,11.882,27.368,17,40,15.205,37.528,28.553,98.393,10,142-8.965,21.071-27.361,37.315-48,47v-3c12.764-14.363,14.223-43.19,19-65,2.145-9.792,2.029-25.235-1-30,1,42.444-13.232,72.2-29,98l-1-1c-9.7-7.234-14.883-22.132-20-34-3.871-8.979-8.155-19.326-11-30-17.231-64.65,42.915-91.534,59-130C803,610.438,803.927,598.874,804,586ZM655,693h2c1.572,18.69,15.173,33.922,27,43,19.932,15.3,43.623,38.684,52,65,5.132,16.123,2.329,59.571-9,66-13.341-19.927-31.139-35.988-38-63h-1v2l7,20c6.491,14.961,16.429,28.161,25,41h-3c-7.174-6.037-17.509-8.5-25-14-20.279-14.875-32.947-40.926-40-69q-1-12.5-2-25c-1.29-6.528-2.612-19.9-1-28Q652,712,655,693Z"/>
</svg>

اون Color Fill Data_1 و Color Fill Grass و ... ، لایه ها در فتوشاپ هستند .
حالا میخوام این اطلاعات را جوری در wpf کپی کنم که اولا شکلش ، همین جوری باشه (حالا با تغییر ابعاد . مثلا در ابعاد width=100 و height=120) و هم اینکه بتونم هر شکل را (که شامل 5 شکل هست) ، بصورت جداگانه ، کنترل کنم . مثلا برای هر شکل ، یه Path ئه مجزایی باشه که بتونم هر کدوم از پروپرتی های اشیاء Path (یا هر shape یا کلا المنت دیگه ای که بود) را کنترل کنم مخصوصا پروپرتیِ رنگش را) .

چجوری میشه این کار را به ساده ترین شیوه انجام داد؟
من میتونم اما برای هر کدوم از این 5 شی ، باید یه Path تعریف کنم که بصورت دستی ، هر کدوم شون را باید Transform کنم که این جوری دقیق از آب در نمیاد .

بعد اینکه استاد وقتی گفتین در wpf بهتره از گرافیک های وکتوری استفاده کنیم ، من دیگه این آیکون اصلی نرم افزار را هم از اول به همین صورت درست کردم (البته من انجام ندادم) .
دست تون درد نکنه بابت طراحی (و تغییر رنگ) آیکون قبلی . ببخشیدها .

 

[SajjadKhati]

سلامی مجدد
خیلی ممنون استاد .
استاد ، یه فایل svg دارم (که پیوست میکنم) .
که شامل اطلاعات زیر هست :

<svg xmlns="http://www.w3.org/2000/svg" width="848" height="932" viewBox="0 0 848 932">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }

      .cls-1, .cls-2 {
        fill-rule: evenodd;
      }

      .cls-2 {
        fill: #14fa14;
      }
    </style>
  </defs>
  <path id="Color_Fill_Data_1" data-name="Color Fill Data_1" class="cls-1" d="M304,8L418,9c17.978-.812,48.371,2.151,67,6l52,6c43.238,9.506,89.86,20.116,126,39,23.178,12.112,46.149,22.932,60,44,12.444,18.93,15.013,111.707,2,133-22.867,37.416-73.491,55.079-120,69-123.017,36.82-336.8,45.675-463,4-45.294-14.957-88.637-27.689-114-62-11.75-15.9-14-33.435-14-62V124C41.3,57.409,117.047,38.427,190,21l74-10C277.209,8.163,293.738,13.569,304,8Z"/>
  <path id="Color_Fill_Data_2" data-name="Color Fill Data_2" class="cls-1" d="M259,615c-73.482,1.454-148.315-28.83-196-58-19.832-12.132-38.429-28.945-47-52-7.728-20.788-7.031-119.923,0-141,3.295-9.877,5.8-21.349,16-24,42.163,57.289,177.51,93.874,280,94v3C283.4,463.912,259.286,557.01,259,615Z"/>
  <path id="Color_Fill_Data_3" data-name="Color Fill Data_3" class="cls-1" d="M12,655h3c0.547-10.964,7.318-27.036,17-29,28.669,41.637,97.658,63.437,155,78,19.97,5.072,42.706,4.476,63,9l19,1c4.71,3.683,4.968,18.787,7,25l19,47c23.676,45.86,63.262,97.775,109,121v1H333c-9.8-5.158-26.2.634-38-2-23.5-5.246-50.4-2.524-74-8l-59-11c-44.157-12.182-84.1-27.707-116-52-16.412-12.5-24.04-32.85-34-52V655Z"/>
  <path id="Color_Fill_Shield" data-name="Color Fill Shield" class="cls-1" d="M349,502c39.135,0,84.257-6.261,108-23,11.381-8.024,32.47-38.133,44-41,6.278,5.6,15.142,7.943,23,12,20.15,10.4,38.259,20.269,64,26,23.647,5.265,46.048-3.941,68-4l58,148c11.57,27.754,23.1,70.8,10,107-9.65,26.663-29.467,44.246-45,65-10.469,13.989-21.788,27.228-32,41-4.25,5.732-6.267,13.751-15,15-11.783-7.3-29.024-7.5-43-12-36.762-11.843-83.916-18.873-115-38-30.164-18.561-55.626-46.794-70-81-14.914-35.49-19.646-81.552-31-120-5.949-20.147-9.828-41.039-16-62C354,524.808,349.725,513.947,349,502Zm49,32c2.509,22.819,13.228,50.775,20,72,16.42,51.464,20.627,111.8,59,141,20.386,15.51,42.86,20.921,71,30l53,17c4.353,1.413,16.1,5.121,18,4,11.346-8.022,20.624-23.847,29-35,19.5-25.968,59.5-51.969,47-105-6.574-27.886-18.617-53.122-29-78-7.288-17.464-13.155-35.265-20-52-3.922-9.588-2.105-21.918-16-22-6.8,4-26.778,2.708-35,1-19.573-4.066-33.4-5.219-49-12-11.313-4.919-21.848-14.468-35-17C488.891,510.183,450.781,532.762,398,534Z"/>
  <path id="Color_Fill_Grass" data-name="Color Fill Grass" class="cls-2" d="M492,363c100.8-2.089,148.743,30.839,204,73,12.014,9.167,43.931,39.174,49,53h-1c-10.312-14.959-25.59-29.982-40-41-9.538-7.293-18.013-16.957-28-24-45.917-32.382-130.778-66.717-206-43-19.2,6.054-38.12,13.174-54,23-45.866,28.38-77.1,74.61-94,132l-7,44v24c-0.007,39.264,6.7,71.062,18,99,37.621,93.041,91.3,156.473,184,194,17.539,7.1,41.29,10.551,59,14,22.07,4.3,51.389.594,69-4,61.974-16.169,109.037-46.519,135-98h2v3c-9.1,10.24-14.769,24.139-23,35-23.355,30.814-61.8,56.515-103,69-63.009,19.094-127.552,4.34-176-17-88.5-38.981-145.025-112.065-176-209-12.869-40.273-20.585-98.9-8-147,4.454-17.021,9.274-34.5,16-50A219.8,219.8,0,0,1,426,379c13.394-5.825,29.122-9.293,44-13ZM804,586c9.217,8.761,11.882,27.368,17,40,15.205,37.528,28.553,98.393,10,142-8.965,21.071-27.361,37.315-48,47v-3c12.764-14.363,14.223-43.19,19-65,2.145-9.792,2.029-25.235-1-30,1,42.444-13.232,72.2-29,98l-1-1c-9.7-7.234-14.883-22.132-20-34-3.871-8.979-8.155-19.326-11-30-17.231-64.65,42.915-91.534,59-130C803,610.438,803.927,598.874,804,586ZM655,693h2c1.572,18.69,15.173,33.922,27,43,19.932,15.3,43.623,38.684,52,65,5.132,16.123,2.329,59.571-9,66-13.341-19.927-31.139-35.988-38-63h-1v2l7,20c6.491,14.961,16.429,28.161,25,41h-3c-7.174-6.037-17.509-8.5-25-14-20.279-14.875-32.947-40.926-40-69q-1-12.5-2-25c-1.29-6.528-2.612-19.9-1-28Q652,712,655,693Z"/>
</svg>

اون Color Fill Data_1 و Color Fill Grass و ... ، لایه ها در فتوشاپ هستند .
حالا میخوام این اطلاعات را جوری در wpf کپی کنم که اولا شکلش ، همین جوری باشه (حالا با تغییر ابعاد . مثلا در ابعاد width=100 و height=120) و هم اینکه بتونم هر شکل را (که شامل 5 شکل هست) ، بصورت جداگانه ، کنترل کنم . مثلا برای هر شکل ، یه Path ئه مجزایی باشه که بتونم هر کدوم از پروپرتی های اشیاء Path (یا هر shape یا کلا المنت دیگه ای که بود) را کنترل کنم مخصوصا پروپرتیِ رنگش را) .

چجوری میشه این کار را به ساده ترین شیوه انجام داد؟
من میتونم اما برای هر کدوم از این 5 شی ، باید یه Path تعریف کنم که بصورت دستی ، هر کدوم شون را باید Transform کنم که این جوری دقیق از آب در نمیاد .

بعد اینکه استاد وقتی گفتین در wpf بهتره از گرافیک های وکتوری استفاده کنیم ، من دیگه این آیکون اصلی نرم افزار را هم از اول به همین صورت درست کردم (البته من انجام ندادم) .
دست تون درد نکنه بابت طراحی (و تغییر رنگ) آیکون قبلی . ببخشیدها .

سلامی مجدد
استاد ، یافتم .
اطلاعات Margin و Width و Height از هر Path (که Path ها ، همون لایه های فتوشاپ بودن) را با انتخاب اون لایه در فتوشاپ و در منوی Edit>Free Transform و بعد ، توسط پنل Info (گزینه های X و Y و Width و Height از این پنل) ، این اطلاعات را گرفتم .
سر آخر هم المنت والد (که پنل Canvas در کد زیر هست) را RenderTransform کردم (چون همه ی کدها در یک پست جا نمیگیره ، بخشی اش را میذارم) :

        <Canvas HorizontalAlignment="Left" VerticalAlignment="Top" Margin="600, 660, 0, 0" Width="848" Height="932"  >
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="0.03" ScaleY="0.03"/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Canvas.RenderTransform>
            <Path Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="14, 8, 0, 0" Width="719" Height="329" StrokeThickness="0" Stretch="Fill"
                  Data="M290.000,-0.000 C327.996,0.333 366.004,0.667 404.000,1.000 C421.978,0.188 452.371,3.150 471.000,7.000 C488.332,9.000 505.668,11.000 523.000,13.000 C566.238,22.506 612.860,33.116 649.000,52.000 C672.178,64.111 695.149,74.932 709.000,96.000 C721.444,114.930 724.013,207.707 711.000,229.000 C688.133,266.416 637.509,284.079 591.000,298.000 C467.983,334.820 254.204,343.675 128.000,302.000 C82.706,287.043 39.363,274.311 14.000,240.000 C2.250,224.104 -0.002,206.565 -0.000,178.000 C-0.000,157.335 -0.000,136.665 -0.000,116.000 C27.301,49.409 103.047,30.427 176.000,13.000 C200.664,9.667 225.336,6.333 250.000,3.000 C263.209,0.163 279.738,5.568 290.000,-0.000 Z" >
            </Path>
            <Path Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10, 340, 0, 0" Width="301" Height="275" StrokeThickness="0" Stretch="Fill"
                  Data="M259,615c-73.482,1.454-148.315-28.83-196-58-19.832-12.132-38.429-28.945-47-52-7.728-20.788-7.031-119.923,0-141,3.295-9.877,5.8-21.349,16-24,42.163,57.289,177.51,93.874,280,94v3C283.4,463.912,259.286,557.01,259,615Z" >
            </Path>
            <Path Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12, 626, 0, 0" Width="392" Height="282" StrokeThickness="0" Stretch="Fill"
                  Data="M12,655h3c0.547-10.964,7.318-27.036,17-29,28.669,41.637,97.658,63.437,155,78,19.97,5.072,42.706,4.476,63,9l19,1c4.71,3.683,4.968,18.787,7,25l19,47c23.676,45.86,63.262,97.775,109,121v1H333c-9.8-5.158-26.2.634-38-2-23.5-5.246-50.4-2.524-74-8l-59-11c-44.157-12.182-84.1-27.707-116-52-16.412-12.5-24.04-32.85-34-52V655Z">
            </Path>
            <Path Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="349, 438, 0, 0" Width="380" Height="410" StrokeThickness="0" Stretch="Fill"
                  Data="M349,502c39.135,0,84.257-6.261,108-23,11.381-8.024,32.47-38.133,44-41,6.278,5.6,15.142,7.943,23,12,20.15,10.4,38.259,20.269,64,26,23.647,5.265,46.048-3.941,68-4l58,148c11.57,27.754,23.1,70.8,10,107-9.65,26.663-29.467,44.246-45,65-10.469,13.989-21.788,27.228-32,41-4.25,5.732-6.267,13.751-15,15-11.783-7.3-29.024-7.5-43-12-36.762-11.843-83.916-18.873-115-38-30.164-18.561-55.626-46.794-70-81-14.914-35.49-19.646-81.552-31-120-5.949-20.147-9.828-41.039-16-62C354,524.808,349.725,513.947,349,502Zm49,32c2.509,22.819,13.228,50.775,20,72,16.42,51.464,20.627,111.8,59,141,20.386,15.51,42.86,20.921,71,30l53,17c4.353,1.413,16.1,5.121,18,4,11.346-8.022,20.624-23.847,29-35,19.5-25.968,59.5-51.969,47-105-6.574-27.886-18.617-53.122-29-78-7.288-17.464-13.155-35.265-20-52-3.922-9.588-2.105-21.918-16-22-6.8,4-26.778,2.708-35,1-19.573-4.066-33.4-5.219-49-12-11.313-4.919-21.848-14.468-35-17C488.891,510.183,450.781,532.762,398,534Z">
            </Path>
        </Canvas>

البته میشه Width و Height ئه مربوط به المنت والد (همون المنت Canvas) را مشخص نکرد (یا همون روی auto گذاشت) تا با تغییر RenderTransform ، اندازه اش هم به همون مقدار ، تغییر کنه .
تشکر استاد .

 

[SajjadKhati]

خیلی ممنون استاد
ولی من نمیدونم کدم چه اشکالی داره که RenderTargetBitmap ام رسمی انجام نمیده (در کد زیر) :

                <Grid Name="grdConvertToBmp" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10, 490, 0, 0" Width="200" Height="200" ClipToBounds="True">
                    <Grid.Children>

                        <Ellipse Margin="15" Stroke="Red" StrokeThickness="2" Fill="Red" >
                            <Ellipse.Effect>
                                <DropShadowEffect BlurRadius="30" Direction="0" RenderingBias="Quality" ShadowDepth="0" />
                            </Ellipse.Effect>
                        </Ellipse>

                    </Grid.Children>
                </Grid>

                <Image Name="imgOpacityMask" HorizontalAlignment="Left" Height="206" Margin="230,484,0,0" VerticalAlignment="Top" Width="335" Stretch="Fill">
                    <Image.Source>
                        <BitmapImage UriSource="E:\Tasavir\Shakhsiat ha\Dr Abbasi\dr hassan abbasi 1.jpg"/>
                    </Image.Source>
                </Image>
             
                <Image Name="imgTest" HorizontalAlignment="Left" Height="206" Margin="600,484,0,0" VerticalAlignment="Top" Width="331"/>
             
                <Button Content="Button" HorizontalAlignment="Left" Height="44" Margin="10,712,0,0" VerticalAlignment="Top" Width="113" Click="Button_Click_1"/>

کد بالا ، درون Window هستن که ننوشتمش .

و در زمان اجرا هم :

        private void Button_Click_1(object sender, RoutedEventArgs e)
        {
            RenderTargetBitmap renderedBitmap = new RenderTargetBitmap(Convert.ToInt32(this.grdConvertToBmp.Width), Convert.ToInt32(this.grdConvertToBmp.Height), 120, 96, PixelFormats.Pbgra32);
            renderedBitmap.Render(this.grdConvertToBmp);

            //imgOpacityMask.OpacityMask = new ImageBrush(renderedBitmap);

            imgTest.Source = renderedBitmap;
        }

توی کنترل imgTest ، رسم ای انجام نمیشه .

استاد ، این کد سی شارپی که نقل قول کرده بودم ، من دقیق متوجه نشدم که چه علتی داره که کار نمیکنه؟
البته کد کامل اش را قبلا دادید . ولی علت اینکه این کد سی شارپ کار نمیکنه را متوجه نشدم چیه؟
من انتظار دارم که وقتی متد RenderTargetBitmap.Render ، یک شی از نوعِ Visual میخواد تا در شیِ خودش (همون شیِ renderedBitmap در کد بالا که نقل کردم) ، رندر و رسم کنه ، پس هر شی ای از فرزندانِ Visual هم که بهش بدیم را هم باید قبول کنه . پس باید شی ای از Grid را که فرزند Visual هست را هم باید قبول کنه .

آیا این پارامترِ ورودیِ متد RenderTargetBitmap.Render ، فقط با اشیاء DrawingVisual سازگار هست؟ و برای کار کردن ، فقط باید شیِ DrawingVisual را در ورودیِ متدش بدیم؟
اگه آره ، پس چرا نوع پارامتر این متد را از نوع Visual انتخاب کردن؟
اگه نه (و ما میتونیم هر نوع شیِ Visual را بدیم) پس چرا در کد بالا ، نمیتونیم شیِ Visual که همون Grid مون هست را بهش بدیم؟ و مجبوریم یه شیِ Visual ئه جدیدِ دیگه (حالا از نوع DrawingVisual) را ایجاد کنیم و شیِ Grid مون را در اون شیِ Visual رسم کنیم و این شیِ Visual ئه جدید (شیِ DrawingVisual) را به عنوان مقدار متدِ RenderTargetBitmap.Render بدیم؟
تشکر استاد .

 

[the_king]

استاد ، این کد سی شارپی که نقل قول کرده بودم ، من دقیق متوجه نشدم که چه علتی داره که کار نمیکنه؟
البته کد کامل اش را قبلا دادید . ولی علت اینکه این کد سی شارپ کار نمیکنه را متوجه نشدم چیه؟

مشکل خاصی نداره جز اینکه المنت ها ممکنه در جاهایی از صفحه چیده باشید که دیده نشن، مثلا مطمئن بشید که imgTest در جایی قرار داره که تغییراتش قابل مشاهده است.

 

[SajjadKhati]

مشکل خاصی نداره جز اینکه المنت ها ممکنه در جاهایی از صفحه چیده باشید که دیده نشن، مثلا مطمئن بشید که imgTest در جایی قرار داره که تغییراتش قابل مشاهده است.

سلام استاد .
ممنون .
المنت imgTest ، قابل مشاهده هست.

 

[the_king]

سلام استاد .
ممنون .
المنت imgTest ، قابل مشاهده هست.

من کد رو بدون مشکل امتحان کردم، صرفا با Margin های شما دیده نمیشد.

 

[SajjadKhati]

من کد رو بدون مشکل امتحان کردم، صرفا با Margin های شما دیده نمیشد.

آو پس مشکل از Margin بود . باید Margin را در حالت 0 و 0 و 0 و 0 قرار بدیم .
ممنون استاد .

 

[SajjadKhati]

ممنون استاد .

میخوام در کد زیر :

        <Canvas  Name="canvsMainIcon" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="0, 0, 0, 0"  >
            <Canvas.RenderTransform>
                <TransformGroup>
                    <ScaleTransform ScaleX="0.03" ScaleY="0.03"/>
                    <SkewTransform/>
                    <RotateTransform/>
                    <TranslateTransform/>
                </TransformGroup>
            </Canvas.RenderTransform>
            <Path Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="14, 8, 0, 0" Width="719" Height="329" StrokeThickness="0" Stretch="Fill"
                  Data="M290.000,-0.000 C327.996,0.333 366.004,0.667 404.000,1.000 C421.978,0.188 452.371,3.150 471.000,7.000 C488.332,9.000 505.668,11.000 523.000,13.000 C566.238,22.506 612.860,33.116 649.000,52.000 C672.178,64.111 695.149,74.932 709.000,96.000 C721.444,114.930 724.013,207.707 711.000,229.000 C688.133,266.416 637.509,284.079 591.000,298.000 C467.983,334.820 254.204,343.675 128.000,302.000 C82.706,287.043 39.363,274.311 14.000,240.000 C2.250,224.104 -0.002,206.565 -0.000,178.000 C-0.000,157.335 -0.000,136.665 -0.000,116.000 C27.301,49.409 103.047,30.427 176.000,13.000 C200.664,9.667 225.336,6.333 250.000,3.000 C263.209,0.163 279.738,5.568 290.000,-0.000 Z" >
            </Path>
            <Path Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="10, 340, 0, 0" Width="301" Height="275" StrokeThickness="0" Stretch="Fill"
                  Data="M259,615c-73.482,1.454-148.315-28.83-196-58-19.832-12.132-38.429-28.945-47-52-7.728-20.788-7.031-119.923,0-141,3.295-9.877,5.8-21.349,16-24,42.163,57.289,177.51,93.874,280,94v3C283.4,463.912,259.286,557.01,259,615Z" >
            </Path>
            <Path Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="12, 626, 0, 0" Width="392" Height="282" StrokeThickness="0" Stretch="Fill"
                  Data="M12,655h3c0.547-10.964,7.318-27.036,17-29,28.669,41.637,97.658,63.437,155,78,19.97,5.072,42.706,4.476,63,9l19,1c4.71,3.683,4.968,18.787,7,25l19,47c23.676,45.86,63.262,97.775,109,121v1H333c-9.8-5.158-26.2.634-38-2-23.5-5.246-50.4-2.524-74-8l-59-11c-44.157-12.182-84.1-27.707-116-52-16.412-12.5-24.04-32.85-34-52V655Z">
            </Path>
            <Path Fill="White" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="349, 438, 0, 0" Width="380" Height="410" StrokeThickness="0" Stretch="Fill"
                  Data="M349,502c39.135,0,84.257-6.261,108-23,11.381-8.024,32.47-38.133,44-41,6.278,5.6,15.142,7.943,23,12,20.15,10.4,38.259,20.269,64,26,23.647,5.265,46.048-3.941,68-4l58,148c11.57,27.754,23.1,70.8,10,107-9.65,26.663-29.467,44.246-45,65-10.469,13.989-21.788,27.228-32,41-4.25,5.732-6.267,13.751-15,15-11.783-7.3-29.024-7.5-43-12-36.762-11.843-83.916-18.873-115-38-30.164-18.561-55.626-46.794-70-81-14.914-35.49-19.646-81.552-31-120-5.949-20.147-9.828-41.039-16-62C354,524.808,349.725,513.947,349,502Zm49,32c2.509,22.819,13.228,50.775,20,72,16.42,51.464,20.627,111.8,59,141,20.386,15.51,42.86,20.921,71,30l53,17c4.353,1.413,16.1,5.121,18,4,11.346-8.022,20.624-23.847,29-35,19.5-25.968,59.5-51.969,47-105-6.574-27.886-18.617-53.122-29-78-7.288-17.464-13.155-35.265-20-52-3.922-9.588-2.105-21.918-16-22-6.8,4-26.778,2.708-35,1-19.573-4.066-33.4-5.219-49-12-11.313-4.919-21.848-14.468-35-17C488.891,510.183,450.781,532.762,398,534Z">
            </Path>
            <Path Fill="#FF00DC00" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="289, 362, 0, 0" Width="550" Height="561" StrokeThickness="0" Stretch="Fill"
                  Data="M492,363c100.8-2.089,148.743,30.839,204,73,12.014,9.167,43.931,39.174,49,53h-1c-10.312-14.959-25.59-29.982-40-41-9.538-7.293-18.013-16.957-28-24-45.917-32.382-130.778-66.717-206-43-19.2,6.054-38.12,13.174-54,23-45.866,28.38-77.1,74.61-94,132l-7,44v24c-0.007,39.264,6.7,71.062,18,99,37.621,93.041,91.3,156.473,184,194,17.539,7.1,41.29,10.551,59,14,22.07,4.3,51.389.594,69-4,61.974-16.169,109.037-46.519,135-98h2v3c-9.1,10.24-14.769,24.139-23,35-23.355,30.814-61.8,56.515-103,69-63.009,19.094-127.552,4.34-176-17-88.5-38.981-145.025-112.065-176-209-12.869-40.273-20.585-98.9-8-147,4.454-17.021,9.274-34.5,16-50A219.8,219.8,0,0,1,426,379c13.394-5.825,29.122-9.293,44-13ZM804,586c9.217,8.761,11.882,27.368,17,40,15.205,37.528,28.553,98.393,10,142-8.965,21.071-27.361,37.315-48,47v-3c12.764-14.363,14.223-43.19,19-65,2.145-9.792,2.029-25.235-1-30,1,42.444-13.232,72.2-29,98l-1-1c-9.7-7.234-14.883-22.132-20-34-3.871-8.979-8.155-19.326-11-30-17.231-64.65,42.915-91.534,59-130C803,610.438,803.927,598.874,804,586ZM655,693h2c1.572,18.69,15.173,33.922,27,43,19.932,15.3,43.623,38.684,52,65,5.132,16.123,2.329,59.571-9,66-13.341-19.927-31.139-35.988-38-63h-1v2l7,20c6.491,14.961,16.429,28.161,25,41h-3c-7.174-6.037-17.509-8.5-25-14-20.279-14.875-32.947-40.926-40-69q-1-12.5-2-25c-1.29-6.528-2.612-19.9-1-28Q652,712,655,693Z">
            </Path>
        </Canvas>

که Width و Height ئه اتوماتیک داره (و مقداردهی نشد) را برای کنترل Canvas بگیرم .
در واقع میخوام ابعادِ این کنترلِ Canvas را در کد سی شارپ بگیرم . چی کار باید کنم؟
پروپرتیِ ActualWidth و ... را هم صفر برمیگردونه .

و اینکه الان اگه بخوام کنترل Canvas ئه بالا را جوری Scale اش را Transform کنم که width ده کلیِ Canvas ام برابر با 32 پیکسل بشه ، باید 32 را تقسیم بر Width واقعی اش (بدون Transform) که 848 بود کنم؟ در واقع باید scale اش را روی 0.377 تنظیم کنم؟

 

[SajjadKhati]

من کد رو بدون مشکل امتحان کردم، صرفا با Margin های شما دیده نمیشد.

استاد ، چرا باید تنظیم Margin ، توی رسم یک کنترل تاثیر بذاره؟
چون اون اطلاعات را باید از مبدا کنترل بگیره . مبدا اش مگه والد کنترلش هست که Margin ئه کنترل بچه ، روش تاثیر داره؟
کلا اگه بخوام وضعیت و posation ئه کنترل فرزند را تغییر بدم اما کلاس RenderTargetBitmap ، این کنترل فرزند را از همین جایی که کنترل فرزندم هست ، رندر کنه ، باید چی کار کنم؟

یعنی همون کاری که در winform انجام میدادیم و هر وقت میخواستیم از کنترلی screenshot بگیریم ، هر کنترلی که میدادیم ، همون کنترل را به عنوان مبدا 0 و 0 قبول میکرد و از اونجا شروع به screenshot گرفتن میکرد .

 

[the_king]

استاد ، چرا باید تنظیم Margin ، توی رسم یک کنترل تاثیر بذاره؟
چون اون اطلاعات را باید از مبدا کنترل بگیره . مبدا اش مگه والد کنترلش هست که Margin ئه کنترل بچه ، روش تاثیر داره؟
کلا اگه بخوام وضعیت و posation ئه کنترل فرزند را تغییر بدم اما کلاس RenderTargetBitmap ، این کنترل فرزند را از همین جایی که کنترل فرزندم هست ، رندر کنه ، باید چی کار کنم؟

یعنی همون کاری که در winform انجام میدادیم و هر وقت میخواستیم از کنترلی screenshot بگیریم ، هر کنترلی که میدادیم ، همون کنترل را به عنوان مبدا 0 و 0 قبول میکرد و از اونجا شروع به screenshot گرفتن میکرد .

کنترل بچه چیه؟ کدوم بچه؟
این screenshot گرفتن نیست، به RenderTargetBitmap ئه میگید رسم فلان المنت رو به تصویر تبدیل کن. رسم اون المنت با مشخصات همون المنت انجام میشه، وقتی تغییر Margin روی رسم اون المنت تاثیر داره پس روی تصویر ترسیم اش هم تاثیر داره دیگه.
رابطه بین موقعیت Ellipse در Grid و ظاهر Grid مشخص ئه، وقتی Margin المنت رو تغییر می دهید Ellipse هم در جای متفاوتی رسم اش رو انجام میده، دقیقا همون رسم رو میاد داخل RenderTargetBitmap انجام میده.

 

[the_king]

که Width و Height ئه اتوماتیک داره (و مقداردهی نشد) را برای کنترل Canvas بگیرم .
در واقع میخوام ابعادِ این کنترلِ Canvas را در کد سی شارپ بگیرم . چی کار باید کنم؟
پروپرتیِ ActualWidth و ... را هم صفر برمیگردونه .
و اینکه الان اگه بخوام کنترل Canvas ئه بالا را جوری Scale اش را Transform کنم که width ده کلیِ Canvas ام برابر با 32 پیکسل بشه ، باید 32 را تقسیم بر Width واقعی اش (بدون Transform) که 848 بود کنم؟ در واقع باید scale اش را روی 0.377 تنظیم کنم؟

نسبت طول به عرض رو حساب می کنید تا همیشه این نسبت رو حفظ کنید، بعد هر وقت طول یا عرض رو به مقدار جدیدی تغییر دادید با ضرب کردن یا تقسیم کردن به اون نسبت اون یکی بدست میاد.

var rect = VisualTreeHelper.GetDescendantBounds(CanvasName)

 

[SajjadKhati]

کنترل بچه چیه؟ کدوم بچه؟
این screenshot گرفتن نیست، به RenderTargetBitmap ئه میگید رسم فلان المنت رو به تصویر تبدیل کن. رسم اون المنت با مشخصات همون المنت انجام میشه، وقتی تغییر Margin روی رسم اون المنت تاثیر داره پس روی تصویر ترسیم اش هم تاثیر داره دیگه.
رابطه بین موقعیت Ellipse در Grid و ظاهر Grid مشخص ئه، وقتی Margin المنت رو تغییر می دهید Ellipse هم در جای متفاوتی رسم اش رو انجام میده، دقیقا همون رسم رو میاد داخل RenderTargetBitmap انجام میده.

خیلی ممنون استاد .
منظورم این نبود .
فرض کنید Ellipse ای با Margin ئه 100 و 100 درون Grid رسم کردیم (در این صورت ، Ellipse ، فرزندِ Grid میشه دیگه). وقتی به RenderTargetBitmap میگیم که Ellipse را رندر بگیره ، اگه مبدا اش Grid را در نظر بگیره ، پس باید اون Ellipse را با اختلاف 100 تا هر هر گوشه ، رسم کنه که درسته اما وقتی گفتیم Ellipse را رسم کن ، دیگه هر جا مختصاتِ همون Ellipse بود باید رسم کنه دیگه . یعنی اگه 100 تا از هر سمت فاصله داشت ، نباید فاصله اش را در نظر بگیره چون مبدا اش همون کنترل Ellipse مون هست دیگه .
من دقیق متوجه نشدم (درباره ی جواب و پست 252 هم خیلی ممنون) .

------------------------------------

استاد ، مستقل از ریزولیشن عمل کردن (Resolution Independence) در wpf ، به چه معنای دقیقی هست؟ تفاوت مستقل از ریزولیشن بودن یا نبودن ، در چیه؟
مقالات زیر را خوندم :

WPF : Understanding Resolution Independence and DPI awareness in WPF - Tech Blog City

و

Developing Resolution-Independent Applications in WPF

در مقاله ی اول ، که از اساس توضیح داد ، قضیه ی dpi (فرقش با ppi) را دقیق متوجه نشدم . انگار میگفت (اگه دقیق متوجه شده باشم) وقتی تنظیمات dpi را در پروژه های wpf بالا ببریم ، اندازه ی پروژه بالاتر میره اما من هر دو پروژه ی winform و wpf را تست کردم ، اندازه ی هر دو بالاتر رفت و فرقی با هم نکردن .

در مقاله ی دومی ، فقط layout و چیدمان را توضیح داد . ربطش به Resolution Independence بودن را متوجه نشدم .

 

[the_king]

خیلی ممنون استاد .
منظورم این نبود .
فرض کنید Ellipse ای با Margin ئه 100 و 100 درون Grid رسم کردیم (در این صورت ، Ellipse ، فرزندِ Grid میشه دیگه). وقتی به RenderTargetBitmap میگیم که Ellipse را رندر بگیره ، اگه مبدا اش Grid را در نظر بگیره ، پس باید اون Ellipse را با اختلاف 100 تا هر هر گوشه ، رسم کنه که درسته اما وقتی گفتیم Ellipse را رسم کن ، دیگه هر جا مختصاتِ همون Ellipse بود باید رسم کنه دیگه . یعنی اگه 100 تا از هر سمت فاصله داشت ، نباید فاصله اش را در نظر بگیره چون مبدا اش همون کنترل Ellipse مون هست دیگه .
من دقیق متوجه نشدم (درباره ی جواب و پست 252 هم خیلی ممنون) .

شما متوجه نشدید به کنار، من هم متوجه نشدم شما چی میگید. کد renderedBitmap.Render(this.grdConvertToBmp) قراره grdConvertToBmp رو رندر کنه که تا جایی که من میدونم grdConvertToBmp اسم اون Grid ئه است، نباید این کد با کدی مثل renderedBitmap.Render(this.MyEllipse) فرق کنه؟ اسم اون Ellipse رو داده اید که رندر کنه یا اسم اون Grid ئه رو؟

استاد ، مستقل از ریزولیشن عمل کردن (Resolution Independence) در wpf ، به چه معنای دقیقی هست؟ تفاوت مستقل از ریزولیشن بودن یا نبودن ، در چیه؟
مقالات زیر را خوندم :

WPF : Understanding Resolution Independence and DPI awareness in WPF - Tech Blog City

و

Developing Resolution-Independent Applications in WPF

در مقاله ی اول ، که از اساس توضیح داد ، قضیه ی dpi (فرقش با ppi) را دقیق متوجه نشدم . انگار میگفت (اگه دقیق متوجه شده باشم) وقتی تنظیمات dpi را در پروژه های wpf بالا ببریم ، اندازه ی پروژه بالاتر میره اما من هر دو پروژه ی winform و wpf را تست کردم ، اندازه ی هر دو بالاتر رفت و فرقی با هم نکردن .

در مقاله ی دومی ، فقط layout و چیدمان را توضیح داد . ربطش به Resolution Independence بودن را متوجه نشدم .

Resolution-Independent در کل به این معنا است که ابعاد باید مستقل از Resolution موقع طراحی یا موقع نمایش سنجیده بشه.
در حالت کلی و صریح یعنی اگه طراح گفته این شیء یک اینچ (یا هر واحد دیگری جز پیکسل فیزیکی) طول داره، باید در هر نمایشگری با هر Resolution ای با همون یک اینچ طول دیده بشه، مگر اینکه در تنظیمات Scale تغییری داده بشه. در WPF دقیقا این نیست، توضیحات مفصلی داره اما کلا هوشمندانه ابعادی رو برای نمایشگر در نظر میگیره که با ابعاد فیزیکی اون نمایشگر حاصل اش کاربر پسند باشه، نه زیادی بزرگ بشه و نه زیادی کوچیک.
یعنی وقتی یک برنامه در محیطی که Resolution پایینی داشته طراحی شده و در یک نمایشگر با Resolution خیلی بزرگ نمایش داده میشه، نباید خیلی ریز و کوچیک دیده بشه طوری که کاربر نتونه درست بخونه یا روی دکمه ها کلیک کردن سخت بشه. این معنی اش دقیقا این نیست که ابعاد فیزیکی طراحی موقع نمایش اصلا تغییر نکنه، معنی اش اینه که تغییر متناسب با شرایط فیزیکی اون نمایشگر و سخت افزار ئه، بی حساب و کتاب نیست.

فرضا در نظر بگیرید که یک نمایشگر عادی PC که 75dpi ئه (در واقع برای نمایشگر dpi واحد درستی نیست، درستش اینه که بگیم 75ppi ئه)، در ابعاد استاندارد Full HD ئه 1920x1080 هر خط یک اینچ ای 75 پیکسل داره.
حالا در نمایشگر گوشی همراه هم در ابعاد استاندارد Full HD ئه 1920x1080 فرضا 500ppi ئه. Resolution ایندو ظاهرا هیچ فرقی با هم ندارند، اما ppi شون خیلی با هم فرق داره چون ابعاد فیزیکی نمایشگر ها خیلی فرق دارند.
در این نمایشگری با ppi خیلی بالاتر که Resolution نمایشگر همونه ، اگه 75 پیکسل رو کنار هم قرار بدهیم، این خط خیلی کوچکتر از یک اینچ میشه. اگه WPF بیاد در نمایشگر به اون کوچیکی یک خط یک اینچی رو نمایش بده هم شاید همه اجزاء در صفحه درست جا نشه چون ابعاد خود گوشی کلا چند اینچ که بیشتر نیست. اگه هم در همون 75 پیکسل ریز خط رو رسم کنه کاربر خوب نمیبینه و با انگشت هاش لمس اون اجزاء به اون ریزی مشکل ئه.
پس باید در ابعادی نمایش اش بده که نه سیخ بسوزه و نه کباب، با فاصله چشم کاربر از نمایشگر و ابعاد فیزیکی اون نمایشگر و مساحت نوک انگشت ها جور در بیاد. این میشه Resolution-Independent به سبک WPF.

 

[SajjadKhati]

شما متوجه نشدید به کنار، من هم متوجه نشدم شما چی میگید. کد renderedBitmap.Render(this.grdConvertToBmp) قراره grdConvertToBmp رو رندر کنه که تا جایی که من میدونم grdConvertToBmp اسم اون Grid ئه است، نباید این کد با کدی مثل renderedBitmap.Render(this.MyEllipse) فرق کنه؟ اسم اون Ellipse رو داده اید که رندر کنه یا اسم اون Grid ئه رو؟

خیلی ممنون استاد .
فرق شون چیه؟ هر دوی Ellipse و Grid ، شیِ Visual هستند دیگه .
متد RenderTargetBitmap.Render هم در ورودی اش شیِ Visual را میخواد دیگه .
اون Grid ای که من دادم ، خودش ، توی Grid ئه دیگه بود و Margin و Width و Height ئه خاصی داشت .

Resolution-Independent در کل به این معنا است که ابعاد باید مستقل از Resolution موقع طراحی یا موقع نمایش سنجیده بشه.
در حالت کلی و صریح یعنی اگه طراح گفته این شیء یک اینچ (یا هر واحد دیگری جز پیکسل فیزیکی) طول داره، باید در هر نمایشگری با هر Resolution ای با همون یک اینچ طول دیده بشه، مگر اینکه در تنظیمات Scale تغییری داده بشه. در WPF دقیقا این نیست، توضیحات مفصلی داره اما کلا هوشمندانه ابعادی رو برای نمایشگر در نظر میگیره که با ابعاد فیزیکی اون نمایشگر حاصل اش کاربر پسند باشه، نه زیادی بزرگ بشه و نه زیادی کوچیک.
یعنی وقتی یک برنامه در محیطی که Resolution پایینی داشته طراحی شده و در یک نمایشگر با Resolution خیلی بزرگ نمایش داده میشه، نباید خیلی ریز و کوچیک دیده بشه طوری که کاربر نتونه درست بخونه یا روی دکمه ها کلیک کردن سخت بشه. این معنی اش دقیقا این نیست که ابعاد فیزیکی طراحی موقع نمایش اصلا تغییر نکنه، معنی اش اینه که تغییر متناسب با شرایط فیزیکی اون نمایشگر و سخت افزار ئه، بی حساب و کتاب نیست.

فرضا در نظر بگیرید که یک نمایشگر عادی PC که 75dpi ئه (در واقع برای نمایشگر dpi واحد درستی نیست، درستش اینه که بگیم 75ppi ئه)، در ابعاد استاندارد Full HD ئه 1920x1080 هر خط یک اینچ ای 75 پیکسل داره.
حالا در نمایشگر گوشی همراه هم در ابعاد استاندارد Full HD ئه 1920x1080 فرضا 500ppi ئه. Resolution ایندو ظاهرا هیچ فرقی با هم ندارند، اما ppi شون خیلی با هم فرق داره چون ابعاد فیزیکی نمایشگر ها خیلی فرق دارند.
در این نمایشگری با ppi خیلی بالاتر که Resolution نمایشگر همونه ، اگه 75 پیکسل رو کنار هم قرار بدهیم، این خط خیلی کوچکتر از یک اینچ میشه. اگه WPF بیاد در نمایشگر به اون کوچیکی یک خط یک اینچی رو نمایش بده هم شاید همه اجزاء در صفحه درست جا نشه چون ابعاد خود گوشی کلا چند اینچ که بیشتر نیست. اگه هم در همون 75 پیکسل ریز خط رو رسم کنه کاربر خوب نمیبینه و با انگشت هاش لمس اون اجزاء به اون ریزی مشکل ئه.
پس باید در ابعادی نمایش اش بده که نه سیخ بسوزه و نه کباب، با فاصله چشم کاربر از نمایشگر و ابعاد فیزیکی اون نمایشگر و مساحت نوک انگشت ها جور در بیاد. این میشه Resolution-Independent به سبک WPF.

آها خیلی ممنون استاد .
الان اینهایی که گفتید ، فرقی نداره که ما بصورت صریح ، چه پروپرتی از چه شی ای را ، چه مقداری بدیم یا ندیدم؟ مثلا اگه Width و Height را بصورت صریح مشخص کنیم ، باز هم عملکردش در صفحه نمایشات مختلف ، همینطور؟
من آخر ، فرق بین ppi و dpi را متوجه نشدم .
اگه متوجه شده باشم ، توی اون لینک اول که در پست قبلی دادم ، انگار گفته بود که به تراکم پیکسل ها در یک اینچ ، ppi میگن . که اون هم انگار تراکم پیکسل ها از لحاظ ارتفاع (محور y ها) را به حساب میارن (مثل فیلم ها که میگن 720p یعنی 720 پیکسل در ارتفاع داره اما تعداد پیکسل های پهنا را نمیگن) .
اما من dpi ئه مانیتورم را تغییر دادم و دیدم هر دو پروژه هایی که از winform و wpf که اجرا کرده بودم ، تغییر ابعاد دادند . این تغییر dpi ئه مانیتور ، ربطی به Resolution-Independent بودنِ wpf نداره؟ چون اون winform که Resolution-Independent نیست هم تغییر ابعاد داد .
تشکر استاد

 

[the_king]

خیلی ممنون استاد .
فرق شون چیه؟ هر دوی Ellipse و Grid ، شیِ Visual هستند دیگه .
متد RenderTargetBitmap.Render هم در ورودی اش شیِ Visual را میخواد دیگه .
اون Grid ای که من دادم ، خودش ، توی Grid ئه دیگه بود و Margin و Width و Height ئه خاصی داشت .

الان بحث نوع داده شون رو که نمی کنیم، فرق ظاهر رندر شیء مورد بحث ئه. دو تا شیء از نوع یکسان هم رندر شون فرق داره، لازم نیست دو نوع متفاوت باشه.
فرق در اینه که رندر یک Grid با رندر Grid فرزند همون Grid فرق داره، رندر Grid فرزند و با رندر Ellipse داخل اون Grid والد فرق داره.
وقتی Grid فلان رندر میشه، اجزاء داخل اون شیء در جاهایی رسم میشه که مواردی مثل Margin ئه Grid روشون تاثیر داره. طبعا درخواست رندر کردن خود Grid ئه با درخواست رندر کردن Ellipse داخلش نتیجه متفاوتی میده.
چه وقتی دکمه رو رندر می کنید و چه وقتی یک المنت والد دکمه رو رندر می کنید اون دکمه جایی رسم میشه اما جاش متفاوته، وقتی والد رو رندر می کنید دکمه باید متناسب با موقعیتی که والد در نظر داشته رندر بشه.
شما میگید:

وقتی به RenderTargetBitmap میگیم که Ellipse را رندر بگیره ، اگه مبدا اش Grid را در نظر بگیره ، پس باید اون Ellipse را با اختلاف 100 تا هر هر گوشه ، رسم کنه که درسته اما وقتی گفتیم Ellipse را رسم کن ، دیگه هر جا مختصاتِ همون Ellipse بود باید رسم کنه دیگه

و در کدتون نوشته اید "Grid Name="grdConvertToBmp> و renderedBitmap.Render(this.grdConvertToBmp) ، یعنی در کد درخواست "میگیم که Ellipse را رندر بگیره" ندارید.
شما Grid ئه رو رندر می کنید در حالی که میگید "وقتی به RenderTargetBitmap میگیم که Ellipse را رندر بگیره"
در کل یعنی به نظر شما فرقی بین رندر کردن Grid و رندر کردن Ellipse داخلش نیست، فرقی بین رندر Grid والد و رندر Grid فرزند نیست، به نظر شما اینها با هم فرقی ندارند اما اینها با هم فرق دارند و رندر متفاوتی هم دارند. حالا چه قبول بکنید و چه نکنید.

الان اینهایی که گفتید ، فرقی نداره که ما بصورت صریح ، چه پروپرتی از چه شی ای را ، چه مقداری بدیم یا ندیدم؟ مثلا اگه Width و Height را بصورت صریح مشخص کنیم ، باز هم عملکردش در صفحه نمایشات مختلف ، همینطور؟

فرق که داره، وقتی برای دکمه طول خاصی در نظر نگرفته اید یعنی طول خودکار مد نظرتونه که به محتواش یا شرایط Alignment مرتبط ئه، اما در هر دو حالت، چه وقتی شما بصورت صریح مشخص اش می کنید و چه وقتی که بصورت خودکار مشخص بشه به هر حال طول با واحد پیکسل فیزیکی نیست که با مقایسه با تعداد پیکسل نمایشگر ثابت بمونه. صریح هست اما بر حسب واحد پیکسل منطقی داخل WPF که میتونه تعداد پیکسل فیزیکی بیشتر یا کمتری بشه.

من آخر ، فرق بین ppi و dpi را متوجه نشدم.

کلمه dot رو برای نقاط چاپی بکار می برند، روی نمایشگر ما pixel داریم، dot نداریم. برای همین dpi برای چاپ معنی درستی میده، شبیه ppi هست اما برای پیکسل های نمایشگر dot درست و مناسب نیست، به همین جهت واحد dpi برای نمایشگر یک اشتباه مصطلح ئه، رایج هست اما اشتباه رایج ئه، ppi درست ئه.

اما من dpi ئه مانیتورم را تغییر دادم و دیدم هر دو پروژه هایی که از winform و wpf که اجرا کرده بودم ، تغییر ابعاد دادند.

منطقی است، اگه کاربر سیستمی بخواد اجزاء بزرگتر یا کوچکتر دیده بشوند این امکانی در ویندوز ئه که هم winform و wpf رعایت می کنند.

 

[SajjadKhati]

الان بحث نوع داده شون رو که نمی کنیم، فرق ظاهر رندر شیء مورد بحث ئه. دو تا شیء از نوع یکسان هم رندر شون فرق داره، لازم نیست دو نوع متفاوت باشه.
فرق در اینه که رندر یک Grid با رندر Grid فرزند همون Grid فرق داره، رندر Grid فرزند و با رندر Ellipse داخل اون Grid والد فرق داره.
وقتی Grid فلان رندر میشه، اجزاء داخل اون شیء در جاهایی رسم میشه که مواردی مثل Margin ئه Grid روشون تاثیر داره. طبعا درخواست رندر کردن خود Grid ئه با درخواست رندر کردن Ellipse داخلش نتیجه متفاوتی میده.
چه وقتی دکمه رو رندر می کنید و چه وقتی یک المنت والد دکمه رو رندر می کنید اون دکمه جایی رسم میشه اما جاش متفاوته، وقتی والد رو رندر می کنید دکمه باید متناسب با موقعیتی که والد در نظر داشته رندر بشه.
شما میگید:

و در کدتون نوشته اید "Grid Name="grdConvertToBmp> و renderedBitmap.Render(this.grdConvertToBmp) ، یعنی در کد درخواست "میگیم که Ellipse را رندر بگیره" ندارید.
شما Grid ئه رو رندر می کنید در حالی که میگید "وقتی به RenderTargetBitmap میگیم که Ellipse را رندر بگیره"
در کل یعنی به نظر شما فرقی بین رندر کردن Grid و رندر کردن Ellipse داخلش نیست، فرقی بین رندر Grid والد و رندر Grid فرزند نیست، به نظر شما اینها با هم فرقی ندارند اما اینها با هم فرق دارند و رندر متفاوتی هم دارند. حالا چه قبول بکنید و چه نکنید.

منطقی است، اگه کاربر سیستمی بخواد اجزاء بزرگتر یا کوچکتر دیده بشوند این امکانی در ویندوز ئه که هم winform و wpf رعایت می کنند.

سلامی مجدد
خیلی ممنون استاد .
الان طبق کدی که قبلا دادید ، یعنی در کد زیر :

            VisualBrush visualBrush = new VisualBrush(this.grdConvertToBmp);

            DrawingVisual controlVisual = new DrawingVisual();
            DrawingContext drawingContext = controlVisual.RenderOpen();
            drawingContext.DrawRectangle(visualBrush, null, new Rect(new Point(0, 0), this.grdConvertToBmp.RenderSize));
            drawingContext.Close();

            RenderTargetBitmap renderedBitmap = new RenderTargetBitmap(Convert.ToInt32(this.grdConvertToBmp.Width), Convert.ToInt32(this.grdConvertToBmp.Height), 96, 96, PixelFormats.Pbgra32);
            renderedBitmap.Render(controlVisual);

            imgOpacityMask.OpacityMask = new ImageBrush(renderedBitmap);

grdConvertToBmp که همون کنترل Grid ما هست . Margin هم داره .
وقتی در کد بالا ، شیِ VisualBrush مون را که حاوی توصیفاتِ برای رسمِ grdConvertToBmp هست را در شیِ DrawingVisual رندر میکنیم ، هیچ مشکلی نیست و Margin اش هر چی که باشه (و کلا این کنترل grdConvertToBmp ، هر فاصله ای که با والدش داشته باشه) ، هیچ تاثیری نداره و من هم همینو میخوام .
اما در کد زیر :

            RenderTargetBitmap renderedBitmap = new RenderTargetBitmap(Convert.ToInt32(this.grdConvertToBmp.Width), Convert.ToInt32(this.grdConvertToBmp.Height), 96, 96, PixelFormats.Pbgra32);
            renderedBitmap.Render(this.grdConvertToBmp);

            imgOpacityMask.OpacityMask = new ImageBrush(renderedBitmap);

که مستقیما grdConvertToBmp را در RenderTargetBitmap رندر میکنیم ، فاصله ی Margin اش را در نظر میگیره .
سئوالم اینه که چرا در رندر اول (رندر شدن شی VisualBrush در DrawingVisual) اون Margin ئه تاثیر نداره اما در رندر دومی (رندر شدن grdConvertToBmp در شی RenderTargetBitmap) اون Margin ئه تاثیر داره؟

Resolution-Independent در کل به این معنا است که ابعاد باید مستقل از Resolution موقع طراحی یا موقع نمایش سنجیده بشه.
در حالت کلی و صریح یعنی اگه طراح گفته این شیء یک اینچ (یا هر واحد دیگری جز پیکسل فیزیکی) طول داره، باید در هر نمایشگری با هر Resolution ای با همون یک اینچ طول دیده بشه، مگر اینکه در تنظیمات Scale تغییری داده بشه. در WPF دقیقا این نیست، توضیحات مفصلی داره اما کلا هوشمندانه ابعادی رو برای نمایشگر در نظر میگیره که با ابعاد فیزیکی اون نمایشگر حاصل اش کاربر پسند باشه، نه زیادی بزرگ بشه و نه زیادی کوچیک.
یعنی وقتی یک برنامه در محیطی که Resolution پایینی داشته طراحی شده و در یک نمایشگر با Resolution خیلی بزرگ نمایش داده میشه، نباید خیلی ریز و کوچیک دیده بشه طوری که کاربر نتونه درست بخونه یا روی دکمه ها کلیک کردن سخت بشه. این معنی اش دقیقا این نیست که ابعاد فیزیکی طراحی موقع نمایش اصلا تغییر نکنه، معنی اش اینه که تغییر متناسب با شرایط فیزیکی اون نمایشگر و سخت افزار ئه، بی حساب و کتاب نیست.

فرضا در نظر بگیرید که یک نمایشگر عادی PC که 75dpi ئه (در واقع برای نمایشگر dpi واحد درستی نیست، درستش اینه که بگیم 75ppi ئه)، در ابعاد استاندارد Full HD ئه 1920x1080 هر خط یک اینچ ای 75 پیکسل داره.
حالا در نمایشگر گوشی همراه هم در ابعاد استاندارد Full HD ئه 1920x1080 فرضا 500ppi ئه. Resolution ایندو ظاهرا هیچ فرقی با هم ندارند، اما ppi شون خیلی با هم فرق داره چون ابعاد فیزیکی نمایشگر ها خیلی فرق دارند.
در این نمایشگری با ppi خیلی بالاتر که Resolution نمایشگر همونه ، اگه 75 پیکسل رو کنار هم قرار بدهیم، این خط خیلی کوچکتر از یک اینچ میشه. اگه WPF بیاد در نمایشگر به اون کوچیکی یک خط یک اینچی رو نمایش بده هم شاید همه اجزاء در صفحه درست جا نشه چون ابعاد خود گوشی کلا چند اینچ که بیشتر نیست. اگه هم در همون 75 پیکسل ریز خط رو رسم کنه کاربر خوب نمیبینه و با انگشت هاش لمس اون اجزاء به اون ریزی مشکل ئه.
پس باید در ابعادی نمایش اش بده که نه سیخ بسوزه و نه کباب، با فاصله چشم کاربر از نمایشگر و ابعاد فیزیکی اون نمایشگر و مساحت نوک انگشت ها جور در بیاد. این میشه Resolution-Independent به سبک WPF.

استاد ، الان باز دقیقا متوجه نشدم .
الان من هم پروژه ی wpf و هم پروژه ی winform را هم زمانی که ریزولیشن مانیتور و هم مقدار dpi ئه مانیتورم را تغییر دادم ، در هر دو حالت ، هر دو پروژه ، تغییر اندازه دادن .
الان ، این به معنای Resolution Independent نیست؟
پس یه مورد میمونه . اون اینکه زمانی که اندازه ی مانیتور (صفحه نمایش) تغییر کنه ، در این حالت ، اون Resolution Independent تاثیر داره فقط؟
ممنون استاد

 

[SajjadKhati]

بعد اینکه استاد ، مهمترین دلیل استفاده ی xaml در wpf اینه که طراحان گرافیکی (اونهایی که با xml آشنا هستن مثل طراحان وب اما با سی شارپ آشنایی ندارن) بتونن طراحیِ شون را بصورت مجزا کنن و برنامه نویس ها هم بتونن بصورت جداگانه منطق برنامه شون را بنویسن؟
همچنین دلیل دیگه اینه که ساختار کدنویسیِ درختی (و content محور) در xml باعث میشه درک کنترل ها (که بصورت درختی تو در توی هم قرار میگیرن) ، راحت تر بشه؟
و همچنین بخاطر اتریباتسِ ContentProperty که برای کلاس های بعضی از کنترل ها در wpf در نظر گرفتن و بنابراین برای مقداردهیِ Content Property ها (پروپرتی هایی که میتونیم محتوا و content ئه xaml ای بهش اختصاص بدیم) ، نیاز به نوشتنِ صریحِ اون پروپرتی نیست و بصورت مستقیم میتونیم بدون نوشتن اون پروپرتی ، مقداری برای اون پروپرتی در نظر بگیریم که باعث کم شدن طول کدها میشه (مثل پروپرتی Items در ItemsControl ها . یا پرورتیِ Content در ContentControl ها) . ؟
این 3 تا دلیل ، مهمترین دلایلِ استفاده ی xaml بجای کدهای سی شارپ در طراحی ظاهر برنامه ها در wpf هستند یا نه یا دلیل هایی که گفتم ، اشکال دارن؟

قابلیت virtualization در کنترل ها (که انگار قابلیت ای در کنترل های مخصوصا دارای scroll دار هست که باعث میشه فقط همون تعداد از آیتم هایی از اون کنترل که در صفحه ی نمایش داره نشون میده را در لود کنه و در حافظه بارگذاری کنه و برای زمانی که تعداد آیتم هامون بسیار زیاد هست ، خیلی کاربردی هه) در wpf و در winform ، تفاوتی دارن؟ منظورم اینه که در wpf این قابلیت ، بهتر شد؟

همچنین تفاوت data binding در wpf و در winform ، از لحاظ بهبودهای انجام شده ، چیه؟
تشکر

 

[the_king]

سلامی مجدد
خیلی ممنون استاد .
الان طبق کدی که قبلا دادید ، یعنی در کد زیر :

            VisualBrush visualBrush = new VisualBrush(this.grdConvertToBmp);

            DrawingVisual controlVisual = new DrawingVisual();
            DrawingContext drawingContext = controlVisual.RenderOpen();
            drawingContext.DrawRectangle(visualBrush, null, new Rect(new Point(0, 0), this.grdConvertToBmp.RenderSize));
            drawingContext.Close();

            RenderTargetBitmap renderedBitmap = new RenderTargetBitmap(Convert.ToInt32(this.grdConvertToBmp.Width), Convert.ToInt32(this.grdConvertToBmp.Height), 96, 96, PixelFormats.Pbgra32);
            renderedBitmap.Render(controlVisual);

            imgOpacityMask.OpacityMask = new ImageBrush(renderedBitmap);

grdConvertToBmp که همون کنترل Grid ما هست . Margin هم داره .
وقتی در کد بالا ، شیِ VisualBrush مون را که حاوی توصیفاتِ برای رسمِ grdConvertToBmp هست را در شیِ DrawingVisual رندر میکنیم ، هیچ مشکلی نیست و Margin اش هر چی که باشه (و کلا این کنترل grdConvertToBmp ، هر فاصله ای که با والدش داشته باشه) ، هیچ تاثیری نداره و من هم همینو میخوام .
اما در کد زیر :

            RenderTargetBitmap renderedBitmap = new RenderTargetBitmap(Convert.ToInt32(this.grdConvertToBmp.Width), Convert.ToInt32(this.grdConvertToBmp.Height), 96, 96, PixelFormats.Pbgra32);
            renderedBitmap.Render(this.grdConvertToBmp);

            imgOpacityMask.OpacityMask = new ImageBrush(renderedBitmap);

که مستقیما grdConvertToBmp را در RenderTargetBitmap رندر میکنیم ، فاصله ی Margin اش را در نظر میگیره .
سئوالم اینه که چرا در رندر اول (رندر شدن شی VisualBrush در DrawingVisual) اون Margin ئه تاثیر نداره اما در رندر دومی (رندر شدن grdConvertToBmp در شی RenderTargetBitmap) اون Margin ئه تاثیر داره؟

در کد اول شما رسم داخل grdConvertToBmp رو تبدیل کرده اید به یک Brush. فقط رسم داخل grdConvertToBmp ئه، دیگه کاری به موقعیت grdConvertToBmp در Window نداره.
حالا این Brush رو در کادری که نمایش بدهید در اون فضا رسم میشه، کاری نداره که grdConvertToBmp ئه کجا بود و چه Margin ای داشت.

استاد ، الان باز دقیقا متوجه نشدم .
الان من هم پروژه ی wpf و هم پروژه ی winform را هم زمانی که ریزولیشن مانیتور و هم مقدار dpi ئه مانیتورم را تغییر دادم ، در هر دو حالت ، هر دو پروژه ، تغییر اندازه دادن .
الان ، این به معنای Resolution Independent نیست؟

چرا، هست، انتظار داشتید بدون مطالعه مطالب مفصل اش دقیق متوجه بشوید؟ اگر دقیق متوجه نمی شوید احتمالا به این خاطر ئه که در موردش دقیق مطالعه نمی کنید.
Resolution Independent با معیار های WPF که قطعا رعایت شده و در Windows Forms هم که کلا سیستم Resolution Independent ای نیست با توجه به تنظیم پیشفرض Form. AutoScaleMode (در واقع برای ContainerControl ها است) که روی Font تنظیم میشه، تا حدودی تغییر ابعاد خودکار رو انجام میده.
و این مساله هم که سیستم Resolution Independent هست یا نیست ارتباطی با موثر بودن و نبودن تنظیم dpi ویندوز برای نمایشگر نداره، اون یک ضریب نرم افزاری است که کاربر بتونه ابعاد اجزاء در همه سیستم ها رو بصورت هماهنگ بزرگتر یا کوچکتر کنه، تا بنا به نیازش نمایش درشت تر یا ریزتر باشه. طبعا هر سیستمی که به این تنظیم توجه نکنه یک نقص محسوب میشه. ربطی به این نداره که اون سیستم Resolution Independent ئه یا Resolution Dependent. اون ضریب باید موثر باشه.

پس یه مورد میمونه . اون اینکه زمانی که اندازه ی مانیتور (صفحه نمایش) تغییر کنه ، در این حالت ، اون Resolution Independent تاثیر داره فقط؟

معلومه که اصلا معنی Resolution Independent یا Resolution Dependent رو درک نکرده اید. در موردش بیشتر مطالعه کنید.

 

[the_king]

بعد اینکه استاد ، مهمترین دلیل استفاده ی xaml در wpf اینه که طراحان گرافیکی (اونهایی که با xml آشنا هستن مثل طراحان وب اما با سی شارپ آشنایی ندارن) بتونن طراحیِ شون را بصورت مجزا کنن و برنامه نویس ها هم بتونن بصورت جداگانه منطق برنامه شون را بنویسن؟

نه. اینکه بخش لایه منطق تجاری از واسط کاربری جدا است که درست ئه، اما ربطی به اینکه چرا برای توصیف واسط کاربری از XAML استفاده شده نداره، انتخاب XML ربطی به آشنایی طراحان گرافیکی با XML نداره.
فایل های پروژه (csproj) ویژوال استدیو هم با ساختار XML نوشته شده، در حالی که کلا ساختن این فایل باید بصورت خودکار انجام بشه و ارتباطی با آشنایی یا عدم آشنایی کاربر با XML نداره.
XML یک قالب کاملا شناخته شده است که هم با ساده ترین ویرایشگر های متنی قابل ویرایش ئه و هم طراحی و توسعه یک فرمت در XML ساده است. برای همین در خیلی کاربرد ها از XML استفاده میشه.

همچنین دلیل دیگه اینه که ساختار کدنویسیِ درختی (و content محور) در xml باعث میشه درک کنترل ها (که بصورت درختی تو در توی هم قرار میگیرن) ، راحت تر بشه؟

موافقم. اما به هر حال نظر شخصی من یا شما است، نه معیار انتخاب XML. ممکنه در بین دلایل این انتخاب یک دلیل اساسی باشه یا نباشه.

و همچنین بخاطر اتریباتسِ ContentProperty که برای کلاس های بعضی از کنترل ها در wpf در نظر گرفتن و بنابراین برای مقداردهیِ Content Property ها (پروپرتی هایی که میتونیم محتوا و content ئه xaml ای بهش اختصاص بدیم) ، نیاز به نوشتنِ صریحِ اون پروپرتی نیست و بصورت مستقیم میتونیم بدون نوشتن اون پروپرتی ، مقداری برای اون پروپرتی در نظر بگیریم که باعث کم شدن طول کدها میشه (مثل پروپرتی Items در ItemsControl ها . یا پرورتیِ Content در ContentControl ها) . ؟
این 3 تا دلیل ، مهمترین دلایلِ استفاده ی xaml بجای کدهای سی شارپ در طراحی ظاهر برنامه ها در wpf هستند یا نه یا دلیل هایی که گفتم ، اشکال دارن؟

اصلا اسم از کد های سی شارپ به میون نیارید، اگر بخواهید کد های سی شارپ رو به جای XAML یک گزینه در نظر بگیرید یعنی XAML و #C رو نمی شناسید که فکر می کنید بجای XAML میشد از #C استفاده کرد.
ممکن بود یک فرمت اختصاصی برای این منظور در نظر بگیرند، خیلی بروز تر، راحت تر و کاملا منطبق با نیاز های WPF و بدون هیچ مشخصه اضافی و بلا استفاده ای. نه، شناخته بودن و استاندارد بودن XML مهمتر بوده.
چطور که مایکروسافت قبل از اینکه به فرمت باز XML برای آفیس روبیاره از فرمت های باینری و اختصاصی خودش استفاده می کرد که حتی مزایایی مثل سرعت فراخوانی بالاتری داشتند، اما در نهایت رو به فرمت های باز و استاندارد مبتنی بر XML آورد.

قابلیت virtualization در کنترل ها (که انگار قابلیت ای در کنترل های مخصوصا دارای scroll دار هست که باعث میشه فقط همون تعداد از آیتم هایی از اون کنترل که در صفحه ی نمایش داره نشون میده را در لود کنه و در حافظه بارگذاری کنه و برای زمانی که تعداد آیتم هامون بسیار زیاد هست ، خیلی کاربردی هه) در wpf و در winform ، تفاوتی دارن؟ منظورم اینه که در wpf این قابلیت ، بهتر شد؟
تشکر

نمیشه گفت بهتر ئه، بستگی به توانایی برنامه نویس داره. تفاوت ها در ساختار که زیاد ئه اما تاثیر گذار نیستند. اگه سرعت نمایش داده ها رو در نظر نگیرید، فرقی نمی کنه که Virtual Data Source، تو چه سیستمی باشه.
در نمایش داده با حجم کم هم که مناسب کادر صفحه است سرعت بالا و پایین بودنش تاثیر آنچنانی نداره چون به هر حال زمان کمی صرفش میشه.
درسته که WPF از پردازنده کارت گرافیکی که ذاتا قوی تر ئه و یا پردازش موازی استفاده میکنه اما الزاما در همه ترسیم ها سریعتر از Windows Forms نیست.